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قدىة في لخة :H 71ML‏ 

الدرس الأول :الأساسياىت 

الدرمس الثاني :اللو ار 

الحرس الال :الخطوط 

الحرس الرايع :الفقر ات و القو ائم 
الدرس الخاعس :الور والرسومابت 
الرس الساحس :الو لات التنننعبية 
الدرس السابع :الجداو|_[1] 

الرس القامس :الجداو ل [2] 

الرس التاسع :الإطار انت 

الحرس العاشر :و سو ص... مرن هنا و هناك!ا! 
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الحرس الحاحي عفر :النمادد[1] 

الدرس الثاڼيي حشر :النماد ج[2] 

الحرم الفاله عفر :الو سوم الخاصة ب MS‏ 
Internet Explorer‏ 
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ان التطور الشديد الذي شهدته لغة 11۷11 »والاعداد الهائلة التي تحاول ان تتعلم 


هذه اللغة الجميلة والسهلة كان لابد لي من انشاء كتاب يتحدث عن هذه اللغة. 


وفي الحقيقة توجد كثير من الكتب تتحدث عن لغة ]11 ءولكن قليل منها يعلمك 
كيف تصبح مصمم صفحات ويب ناجح. 


وفي هذا الكتاب سنسير خطوة خطوة يا عزيزي المتدرب. 


ولقد اعتمدت على عدة مصادر وكتب ٠......................وادعوا‏ لهم بالخير والصحة 
والعطاء الدائم. 


وعموما اتم اسعد الاوقات» واستفادة موفقة بادن الله 1 


قبل راء سا )لابه 


يجب ان يكون لديك محرر نصوص متل N٥٤٥4‏ المرفق مع Widows‏ 
ومتصفح لمعاينة النتlئج‏ مئJ .MS Internet yi Netscape Navigator‏ 


۳ 


1 Internet 
Internet Explorer 


a | “( Mes documents rêcents F | 
Courrier êlectronique 1 
ll Microsoft Office Sutlook E 
2 Mes images 
ر‎ Ma musique 


ا 
1 
1 
1 
1 
Ki‏ 
0 
1 


Panneau de configuration‏ و 


Lecter Windows Media 
ا‎ Configurer les prograrmnmes 
par dêfaut 


li 
aE i, im tëlëcopieurs 


® ûATF-LlEaner 


1 
WW won ا لر‎ 
E Exêrukter... 


Tous les programmes 


î dêmarrer 


ولا تظن ان ابدا ان انشاء مواقع عملية صعبة هذا خاطئ هذا خاطئ هذا خاطئ.......... 
واذا اكملت قراءة هذا الكتاب جيدا ستتمكن من تصميم صفحات الويب. 
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ان تعلم لغةَ 1 ]] امر ممتع وستعرف ذلك. 


يا عزيزي المتدرب لقد كنت متلك مبتدئ لكن بعون الله ورعايته صرت مصمم مواقع 


ویب ناجح. 
يمنع استغلال هذا الكتاب في اي امور تجارية بدون الاذن الخطي من 
المؤلف e‏ 


المؤلف غير مسؤول تماما عن اي استعمال غير شرعي لهذا الكتاب.. 


في حالة وجدت اي اخطاء في هذا الكتاب يمكنك مراسلتي على البريد التالي : 
Dınaro2Ayoub @gmail.com‏ 
اؤ 
Dinaro 22@hotmailcom‏ 


سيكون عما قريب بإذن الله كتب جديدة في عدة لغات منها : اویوم و مطم و cs‏ 
۾ 6 .mysql ys javascript gy visual basic‏ 


ارجوا زيارة المنتد٣” www.dinaro.com/yb3‏ 
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ٹن الگتایے‎ 
الدعاء لي ولوالدي ولجميع المسلمين بالصحة والمذاء والازدمار والنماء‎ 


والعطاء الحائء والحفاء 9er‏ پالچۋڭ والخچاة هن )لار 
وهذا كل ها أطلبة.....وشكرا لكد.. 
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IN WISN a 


RARE 


4 ان‎ U RAN \IUuu Au 
84 


ea‏ ھ کے ل“ 


مقدمة هي لغة H۲ M1‏ 


أهلاً بك إلى مقدمة لغة 11[ أو كما يسميها البعض لغة الهتمل . 
حسناً فلنبدأ الشرح ولكن أولا أريد أن أجيب على بعض أسئلتك واتوقع أن أول سؤال 
يقول : 


ما معنى لغ HTML‏ ؟ 


ان لغة 11M‏ وهي اختصار لكلمة (Language Markup Text Hyper)‏ 
وهي إحدی الطرق في تصميم صفحات على الانترنت أو تزيين الرسائل التي تبعث عبر 
البريدالالكتروني. 


ان لغة H11۷]‏ ليست لغة برمجية كلغة K++‏ أو ۸۷۸[ أو € فهي لغة سهلة 
وغير معقدة ولا تحتوي على شيفرات كثيرة كذلك فهي لا تحتاج إلى مترجم . لذلك فهي 
لغة بسيطة جداًء وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة 
والهيكلية المستخدمة فيها. 


تحتاج دائماً إلى تطبيق ما تتعلمه بصورة عملية أكثر من مجرد الأمثلة المدرجة في 
الكتاب. 
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الدرس الأول 
الأساسباء“ 


حسناً فلنبداً الشرح تكتب لغة 1۷11[ برموز غريبة وكثيرة اسمها باللغة الانجليزية 
الوعه1 وتسمى باللغة العربية الوسوم . 


<۳۸6/> النص کنب بین الو سمین‌<۲۸6> 


ي ر ر ر ر ر ا 


و لكل وسم من وسوم لغة 1M‏ وسم بداية ووسم نهاية وسوف امثله لك من 
خلال الرسم التالي : 
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سوف أشرح کل وسم على حدی : 


والوسم الأول هو الوسم < H1١1‏ > الذي كما ذكرت سابقاً أنه أهم الوسوم 
المستخدمة في بناء الصفحات المستخدم فيها لغة H111‏ » لأنه يقوم بتعريف 
للمتصفح أن هذه الصفحة مصنوعة بلغة H111‏ ويوضع هذا الوسم في أول 
المستند المصنوع بلغة ائ-M11‏ 11 ولولا هذا الوسم لظهرت محتويات الصفحة بصورة 
باهتة وغير مفهومة › وسم النهاية هو < 1M]‏ ]/ > الذي يوضع أخر المستند 
المصنوع بلغة الا1M]‏ . 


فلنأتي الآن للوسم < [٤۸5‏ > الذي يستخدم لتعريف صاحب الصفحة واللغة والعديد 
من الأشياء التي سوف نشرحها في دروس قادمة إنشاء الله . وأذكرك أن وسم النهاية 
الخاص به هو < /٥٤H٤4۸[B‏ > 


نأتي الآن إلى الوسم < 1۲۲1۴٤‏ > الذي يمثل الجملة التي توضع أعلى الشاشة على 
اليسار » ووسم النهاية الخاص به هو < 1٤‏ آ۲/ > » ملاحظة يوضع هذا الوسم بين 
</HEAD > < HEAD > jal‏ 


نأتي الآن إلى الوسم < 805۷ > الذي هو لب الدروس بأكملها » حيث يمثل هذا 
الوسم محتويات الصفحه باكملها حيث تضع فيه الجداول والصور و المواضيع وكل 
ماتريده أن يظهر على الصفحة . 


سوف أبسط لك كل ما ذكرت في هذا الدرس داخل هذا الرسم التبياني : 
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html 7 


محنو بات اتح فة يدا فیا فن تصنو صن 
جد اوك ووصلات تشعيية ورسوح وصور 


اذن ملف اصا۳ بیدا دائماً بالوسم <1۷1 ]> وينتهي بالوسم 


<ا 1M‏ ]/>. لا تنسی ذلك! 


اذن عزيزي المتدرب ما رأيك لو نطبق ذلك بصورة عملية : 
ولا تنسى أن الامتداد المستخدم في أسماءِ ملفات .html yi .htm ya HTML‏ 
مثال : 
<HTML>‏ 
<HEAD>‏ 
<TITLE>‏ 
first page web‏ 


</TITLE> 
</HEAD> 
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U Rouveau Document texte .ixt - Bloc-notes 


Fichier Edition Format #Affichage ? 


4HTML>» 
HEAD» 
TITLE» 

first page web 
< TITLE> 
s/HEAD> 


BODY: 
hello world !! 
<BODY> 
sfHTML> 


TE Nouveau Document texte.txt - Bloc-notes 
gly | Edition Format #Affichage ? 


Nouyeall LErl+H 
UVF... tro 
Enregistrer Ltrl+5 


Enregistrer s05, , 


Mise en pagê... 
Imprimer... Ltrl+P 


Quitter 


hello world !! 
</BODY> 
sf/HTML> 


الناتج: 


13 


<BODY> 
hello world !! 
</BODY> 
</HTML> 


Enregistrer dans: | CD ri ainarorcom/ vb 3 FF ع‎ EEE 


Mes documents 
rêcenkts 


Mes documents 


9 


Poste de travail 


f mae اا‎ 
Fa¥oris rfêsealı pe : Fichiers tente [*. tat] ا‎ Annuıler 


Lodage: 4S1 اا‎ 


ا 


الناتج: 


CITES Page web - Molla Firefox 


File Edit jE History Bookmarks Tools Help 


_ ا‎ (ar ay a File: ff fT: fGocuments and SettingsfAa f OUBfBureaufbaookfJouweaı do 
ÖN Most visited | J Getting Started ®] Latest Headlines 

1a First page web E 

hello world I! 


0 


هل حصلت على نفس النتيجة؟ إذن مبروك لقد قمت بإنشاء أول صفحة ويب خاصة 
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لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الکبیرة ٣٤۸58۴‏ ۸٤۲١ا‏ أو 
الأحرف الصغيرة مودعم سه][. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة 


إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي 
علدما تقوم بضغط مفتاح (Enter‏ التي تجدها هذه المتصفحات في ملف |[ور HH)‏ . 
وبعبارة أخرى فان باستطاعتك كتابة ملفك السابق بالشكل التالي: 


<HTML><HEAD><TITLE> first page web 
</TITLE></HEAD><BODY> 
hello world !! </BODY></HTML> 


أو بالشكل التالي: 


<HTML> 
<HEAD> 
<TITLE> 
first 


page 


web 
</TITLE> 
</HEAD> 
<BODY> 
hello 


world 
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وفي كل الحالات ستحصل على نفس النتيجة. 


إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية 
الفقرة وبداية الفقرة التي تليها؟ 


سوف نستخدم الوسم <8> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا 
الوسم مفرد» أي ليس له وسم نهاية). 


قم بتعديل الملف السابق لكي يصبح بالشكل التالي : 


النا 


تج: 


<HTML> 
<HEAD> 
<TIITLE> 
first page web 
</TITLE> 
</HEAD> 


<BODY> 
hello <BR> world <BR> !! 
</BODY> 
</HTML> 
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EF first page web - Mozilla Firefox 


Fils Edit View History Bookmarks Tools HelF 


- 3 & fay | | Fileffc:fpoc 
اشا‎ Mast Wisited 3 netting Started Latest Headlines 


3 first page web 


hello 
world 
إ!‎ 


وهناك أيضا الوسم <۴> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي 
السطر أو الفقرة ويبداً بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات. 


<HTML> 


<HEAD> 
<TITLE> 
first page web 
</TITLE> 
</HEAD> 


<BODY> 
hello <p> world <p> !! 
</BODY> 
</HTML> 
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DEAE 


Files Edit View History Bookmarks Tools Help 


C f 5 File: fP2: Docun‏ س 


Latest Headlines‏ س Most Yisited ۴٣ netting Started‏ افا 


3 first page web 
hello 
world 


أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام 
الوسم & ;مءطد (والأحرف هي اختصار لأعبارة lly Non Breakable Space‏ 
أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد 
الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا. 


مثال : 


<HTML> 
<HEAD> 
<TIITLE> 
first page web 
</TITLE> 
</HEAD> 


<BODY> 
hello &nbsp; &nbsp; world &nbsp; &nbsp; !! 
</BODY> 
</HTML> 


الناتج: 
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EF first page web - Mozilla Firefox 


Fils Edit View History Bookmarks Tools Help 


- چ‎ 0 A Filet fff: Docum 


Most Yisited netting Started Latest Headlines 


first page web 


helo world |! 


هناك العديد من هذه الرموز والتي يجب أن تكتب بصورة معينة وباستخدام الوسوم 
وليس مباشرة بصورتها العادية. 


كل هذه الإشارات تستخدم أصلاً مع الوسوم فهي محجوزه ضمن مفردات لغ HTML‏ 
ومن الخطاً استخدامها بصورتها الصريحة لئلا يؤدي ذلك إلى حدوث مشاكل في طريقة 
عرض الصفحة. كذلك فان هناك رموزاً غير موجودة أساساً على لوحة المفاتيح كرمز 
حقوق الطبع © ورمز العلامة المسجلة ® ونحتاج إلى هذه الطريقة(طريقة الوسوم) 


وإليك جدول ببعض هذه الرموز ووسومها المكافئة. وألفت نظرك إلى أنها تكتب كما 
هي في الجدول وبدون ٳشارتي < > 


الرموز 


الكود ) السرمز 


&lsquo; 
&rsqluo; 
, &sbquo; 
&ldqauo; 
&rdquo; 


www. dinaro. com/ vb3 


&times; 
&divide; 
&ndash; 
&mdash; 
&nbsp; 
&iexcl; 
&cent; 
&pound; 
&curren; 
&yen; 
&euro; 
&brvbar; 
&sect; 
&#127T,; 
&uml; 
&copy; 
&ordf; 
&laquo; 
not; 
&reg; 
&macr; 
&deg; 
&plusmn; 
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الد رس )لا فيي‎ 
الالوا‎ 
Ll 
.HTML أهلاً وسهلاً بك إلى الدرس الثاني من كتاب تعلم‎ 
سوف نقوم في هذا الدرس بالتعرف على الخصائص التي يمكن إضافتها إلى الوسم‎ 


<۷ 805> من أجل التحكم بالشكل العام للصفحةء وخصوصا فيما يتعلق بالألوان. 


طبعاً أنت لا زلت تذكر الصفحة التي قمنا بكتابتها في الدرس الأول. صفحة بسيطة 
بخلفية رمادية وخط صغير نسبياً لونه أسود. وهذه هي الإعدادات الإفتراضية التي 
يعتمدها المتصفح عندما لا نقوم نحن بتحديد إعدادات أخرى. (ربما تقول: أهذه صفحة 
إنترنت! أين الألوان والرسومات والخطوط الجميلة والتنسيقات التي نراها في صفحات 
الإنترنت؟ معك حق لكن مهلا فما زلنا في البداية). 


سوف نستمر باستخدام صفحتنا هذه لتوضيح آمثلة هذا الدرس أيضاًء لكن لن أقوم 
بتكرار كتابة وسوم البداية طالما أن عملنا يتركز في الجزء المخصص لمحتويات 
الصفحة نفسها أي ضمن الوسمين <5۷ 80> ... <805¥/>. 


لنبدأ العمل يا عزيزي المتدرب !!!!!!! 
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نطلق كلمة خاصية )A trib ute(‏ على التعابير التي تضاف إلى الوسوم» من أجل 
تحديد الكيفيه او الشكل الدي تعمل بها هده الوسوم. وبعبارة اخرى إن الوسم يقوم 
باخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها 
أداء هذا العمل. 


مثال : 


<HTML> 
<HEAD> 
<TIITLE> 

first page web 
</TITLE> 
</HEAD> 


<BODY BGCOLOR="#OOFFOO"> 
hello world !! 

</BODY> 

</HTML> 


الناتج: 


first pase web Mozilla Firefox 


Fils Edit Yiew History Bookmarks Tools Help 


- E A Filet fC Docum 


Mast Visited mektting Started Latest Headlines 


first page web 
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لقد قمت بإضافة الخاصية 0R‏ 86)01 إلى الوسم <۷ 805> › وهي تقوم 
بتحديد لون الخلفية للصفحة. آما 00۴۴00 فهي القيمة التي تمثل اللون المختار 
وهو هنا اللون الأخضرء (لاحظ أنها مكتوبه بين إشارتي " ' ) 


فمن أين جاءت هذه القيم» وکیف؟ 
القليل عن الألوان... 


تلاحظ أن القيم السابقة مكونة من ستة رموزء وهي مكتوبة بالصيغة التالية: 


FF FF FF 
00 00 00 
55 66 22 
RR BB GG 


رمزان یمثلان رمزان يمثلان رمزان یمثلان 
اللون الأخضر اللونالأزرق اللون الأحمر 
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هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق» ولكل منها يوجد 256 درجة 
لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتی 255. ومن خلال مزج هذه 
الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى. 


فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر 
والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر 
فهو مكون من الدرجة 255 للون الأحمر» والدرجة 255 للون الأخضر, والدرجة 000 
من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان 


وبعملية حسابية بسيطة 256><256×256 ينتج لدينا أن عدد الألوان التي يمكن 
الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط. 


حسناء لکن من أي جاءت الرموز ۴۴۴۴۴۴ والتي عبرت عن اللون الأبيض بها. إنها 
ببساطة أرقام... مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 6 ويعبر 
عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز ۸,8,٤,5,٤,۴‏ ). فالرقم 255 
بالنظام العشري العادي يکافه الرقم FF‏ بالنظام السداس عشري. 


إذن فالرقم السداس عشري ۴۴ على اليسار يمثل الدرجة 255 للون الأحمر. والرقم 
۴ في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم ۴۴ على الیمین يمثل 
الدرجه 255 من اللون الأزرق. 


وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: °C٣6699‏ 
أما اللون الأسود فرقمه هو 000000. 


وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري. 
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E. Antiquewhite Aliceblue 
#FAEBDT #FOFS8FF 


Beige Azure 
#FSF5DC #FOFFFF 
Blanchedalmond Black Bisque 


#FFEBCD #000000 #FFE4C4 


Bluë 
#O0000FF 


#FFFS8DC 
Darkblue 
#00008B 
Dere E ORAS 
#006400 #FASASAS 
Darkmagenta 
#8BÛÛ8E 
Darkred 
#8B0000 
Darkslategray Darkslateblue GT 
#2FAFAF #483D8E 
Floralwhite 
#FFFAFO 
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Ghostwhite Gainsboro O --“ 
#FêF8FF #DCDCDC 
Honeydew Green 
#FOFFFO #008000 
Indigo 
#A4B0082 


Lavender Ivory 
#E6E6FA #FFFFFO 
Lemonchiffon Lavenderblush 
#FFFACD #FFFOFS 
Lighteyan Lightblue 
#EOFFFF #ADDB3E6 
Lightgrey Liğhtgoldenrodyellow 
#030303 #FAFADA 

#FFB6C1 
#BO0C4DE 


Lightyellow 


#800000 #FAFOE6 


#0000CD 
Mistyrose Mintcream Midnightblue 
#FFE4E1 #FSFFFA #191970 
Navy Navajowhite Moccasin 
#000080 #FFDEAD #FFE4B5 
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Paleturquoise Palegoldenrod 
#AFEEEE #EEESAA 


Peachpuff Papayawhip 
#FFDABS9 #FFEFDS 
#FFCOCB 
Purple Powderblue 
#800080 #BOEOEĞ 
Saddlebrown 
#8B4513 
Silver TT Seashell 
#FFFSEE 


#COCOCO 


#FFFAFA 


#DS8BFD8 


Whitesmokê White Wheat 
#FS5FSF5 #FFFFFF #F5DEB3 
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EEE EEE ETTETI ETE EXE EIT 
gE eek Û 11 -- J #006633 | #003333 [#000033 | 
EOTEEGEN EEE EE ETN ETE ETE 
EOOEES9 EEE ESE ETE ETEEEEN EMTEEN 
Cg lele Û1 ilelelele J 1i1: ele | #OOGGCC [| #0033CC [#0000CC | 
Cg [eel 111112 [ #OOGGEE [| #0033FF [ #000OFF | 
Eg Teel f <-1 J #336600 | #333300 [| #330000 | 
EEE [Klerk Û <-1 -- J #336633 | #333333 [#330033 | 
CEE [xKleel x11 [#336666 | #333366 | #330066 | 
HS3EE99 | ESSEC EIN EEETESN EEEEEEEN EEETEEN 
Clee Û lelelele Û KK: Tele | #3366CC | #3333CC [#3300CC | 
CEN elgg Û gg | #336GEF | #3333FF | #3300FF | 
FGGEFECE] EESEGSSN EOSIN ECETEEN ETEEEEN ECETEEN 
Ig [leer LT. | #666666 | #663366 | #660066 | 
IgE leer 11 | #666699 | #663399 | #660099 | 
Cg lele Û Tlelelele Û I: lele | #GG6GGCC | #6633CC [#6600CC | 
| #6GFFFF | [#66CGEET HSBSSEE ETI EEE EKEM 
CEE Teel FEET J #996699 | #993300 J #990000 | 
ewe au as 

aaa emme pam ea 
a 
|#CCFF33 HECCC33 HECI EATEE ESFEEEN ESSTEEN 
م ت م م س‎ 
#ccFFCC #CCCECCE | 
ا‎ 
#FFFF33 #EFCC33 HEE EATEN EIFEEEN EAITEEN 
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ملاحظة مهمة:‎ 


بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز» 
لذلك من الأفضل استخدامها دائماً. 


وبالنسبة لبعض الألوان الأساسية والدارجة» من الممكن استخدام أسماء هذه الألوان 
مباشرة بدلا من الأرقام السداس عشرية. وهذا جدول يوضح هذه الألوان ومسمياتها: 


White Black 
Green Red 
Purple Marron 
Blue ا‎ Navy 
Lime o Teal 
Silver Ura; 
RE ا ااا‎ Olive 
Yellow | Fuchsia 


ونعود إلى الوسوم و خصائصها ... 


مثال : 
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<HTML> 
<HEAD> 
<TITLE> 

first page web 
<ITITLE> 
</HEAD> 


<BODY BGCOLOR="#000000" 


BACKGROUND=" maroc.jpg"> 
hello world !! 
</BODY> 
</HTML> 


تقوم الخاصية C)6 ۸0ND‏ 8۸ بتحديد صورة كخلفية (ورق جدران) للصفحة 


وقد استخدمت الصورة التالية: 
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والمسماة maroc.jpg‏ ی صفحتي وکانت هذه النتيجة : 


3 first page web - Microsoft Internet Explorer 


Fichier Edition Affichage Favors Oui ? 


O rricitene 0 م‎ J Rechercher 9 Favoris (f A 


\AYOUBBureaubonkiNouyealy dossier’ 


4 Poste de travail 
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تلاحظ أن المتصفح قد قام بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي 
كل الشاشة. بحيث حجبت أيضاً اللون الأبيض الذي حددناه كلون الخلفية (من خلال 
الخاصية 6٤٨000۴‏ 8) والحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام 

صورة ما كخلفية. ومع ذلك يفضل تحديده إحتياطاً خاصة وأن بعض المتصفحات القديمة 
توصف بأنھا متصفحات نصیة sإWwse B0‏ 4ع ۲e×٤-8B‏ (أي لیس بامکانھا عرض 
الصور). أو ربما هناك بعض المستخدمين الذين قاموا بإلغاء خيار عرض الصور تلقائيً 
من متصفحاتهم. إذن لنعطهم على الأقل فرصة مشاهدة بعض الألوان إن لم يستطيعوا 
مشاهدة الصور. 


إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً كخلفيات للصفحةء 
والمتصفح نفسه هو الذي يقوم تلقائياً بعرضها في وضع التجانب مما يعطي الانطباع 
بانها صورة كبيرة. 


ولنكمل مع باقي الخصائص في وسم <۷ 805>: ريما لاحظت خلال استخدامك 
للإنترنت أن معظم الوصلات التشعبية (sء)مة.1)‏ التي تنقر عليها لتنقلك إلى صفحات أو 
مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرق» وأن الوصلات التي قمت 
بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناًء هذه هي الألوان الإفتراضية التي 
تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ريما تريد 
استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو 
حتى اختفاء نص الصفحة نفسها. فما العمل؟ 


إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص: 
"EX ۲-b"‏ | تحديد لون النص الاأساسي للصفحة 
N K>" Fr"‏ ]1 | تحديد لون الوصلات النشعبية 
"اعا "= [NK‏ ۷ | تحديد لون الوصلات التشعبية التي تمت زيارتها ksہاا‏ dعااوزv‏ 


"bbععr#">= [NK‏ | تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها )ما ع۷]اج 
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والآن» دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة 
بالألوان بنفس تلك الألوان التي تمثلها. وألفت نظرك إلى أنه لا أهمية للترتيب في كتابة 
هذه الخصائص داخل العبارة. 


مثال : 


الناتج: 


<HTML> 

<HEAD> 

<TITLE> 

first page web 
</TITLE> 

</HEAD> 

<BODY BACKGROUND="dinaro.jpg" 
BGCOLOR="#ff99O00" 
TEXT="#33f66" 
LINK="#660OOff" 
VLINK="#ffFOOOO" 
ALINK=" و‎ 
hello world !! 
</BODY> 

</HTML> 
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حاول أن تحللها! هل استنتجت أنني قد حددت الصورة عومز.٠١إه,ذ‏ كخلفية للصفحة؟ 
وأنني اخترت اللون البرتقالي للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ 
وان النص سيظهر باللون الأخضر ؟ أما الوصلات التشعبية فلونها أزرق» والوصلات 
التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون 
الرمادي في لحظة النقر عليها بالفأرة. 


إذا كانت هذه هي استنتاجاتك... فمبروك» لقد نجحت. وكل ما أتمناه أن تكون قد قضيت 
وقتاً ملوناً وزاهياً مع هذا الدرس. 


4 


e-9 مه‎ 
e © مه‎ 


H111!!! H111! 
H111!!! H111! 
!!! 


هه وهه 6-9 
وەه وهه 6-9 
ەه وه-- 0 6-9 
وهه وهه 6-09 
وهه هو-6 6-0 
وهه وهه 6-09 
ههه وهه 6-9 
هده هو-6 6-00 
مهه وهه- 6 6-99 


1!!! 
1!!! 
1!!! 


HHHHHHHHHHHHHH 
HHHHHHHHHHH 
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الرس الاب‎ 


أهلاً وسهلاً بك إلى الدرس الثالث من كتاب تعلم .H M1‏ 


لا زلنا نناقش معا أساسيات تنسيق صفحات الإنترنت والتحكم بخصائصها. وسوف نتابع 


سوف تلاحظ فى هذا الدرس والدروس اللاحقة أن هناك أكثر من طريقة لأداء نفس 
العمل» أو إعطاء نفس الخصانص لصفحات الإنترنت. وبالمقابل قد يبدو لك أن بعض 
الوسوم والخصائص متشابهة في تأثيرهاء لكن بالقليل من التدقيق والتجربة ستكتشف 
أن لكل وسم خصوصيته. 


لنبدأ العمل يا عزيزي المتدرب !!!!!!! 


راجع صفحتنا البسيطة التي عملنا فيها في الدرسين السابقين. إننا لم نقم بالتعامل مع 
الخطوط فيها ولا بأي شكل من الأشكال., أي أننا تركناها على إعداداتها الافتراضية. 


وبالمناسبة فان هذه الإعدادات هي خط عادي» نو عه 2ص New R0‏ S‌mص1i]‏ وحجمهە 
وو د ا 
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الوسم الأول الخاص بالخطوط هر .<FONT/> ... <FONT>‏ 


وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي 
نستخدمها مع هدا الوسم والوسوم الأإخرى للخطوط فهي كالتالي: 


ت ° ial‏ م : f . . MÎ‏ :3 . 
2 ۹ ۽ %4 إا أ ٣ 4 E‏ ۹ 
تقوم هذه الحاصي پنحدید نو ع الخطص الد دي نریده واد نقوم بتحدید اکثر من نوع معاً. وفي هذه 


الحا ۴ 


5 ا : م 4# ص Toul f”‏ 
له اذا لم يتواجد الخط المحدذ 9 على جهاز الشخص ل ال لدي يتصفح الموقع يتم إعنماد الخط 
چا " ی“ ا 


۱ 
للا ...و هگذا 
ت ی 


<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic" 
... TEX... 
<FONT 


7 تتأکد من گنا نكستاء الخطوط بالصورة الصحيحة شحائب 


- ا 1 ° ej‏ و ۴ 1 ۱ e‏ اا ا لل # ت 4 
۳ ۹ ۹ ا ۹ھ اا 1 3 
Colo!‏ سا شكد الكاصللةه گلکد ا لون خط و لكت بنش ل مبادی نت اللو 8 اللي تحذندا سنب ت 


> ابق 


الدرس اا السانة 


<FONT COLOR="FFFO0OO'"= 
... TeX... 
<IFONT> 


1 اء أ هه هه ie‏ #1 و * إآ 1 
و للخذبد خجم الخط نسلخدذم هذة الخاصبهة. و فقض شاك سبةه اخخام لاف ي خط تستطيع المتصفحاٿث 


rT "|‏ ليها. 


ونقوم بتحديد الحجم المطلوب باسلوبين: أولهما المب باشر. حيث يتم كتابة رقم بثراوح ما بین |= 


۴ لذو لك مدا 
ی نرد ت باشرة. 


اي ننا نختار الحجم 
<FONT SIZE="4"»‏ 

... TEX ... 

< FONT 
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4 » “ ا 4 Tel‏ 1 
و النكگ تماد ” ناخحاد ١‏ سے 


خط پخچہ 1 


1 ج ات ات ا ت أ 4ة 4 ص 
1 ۽ ققك أصا اشا ٣‏ او باشار د 
کی 0 اقا ت 2 اط اي كع ار ٥‏ 


<FONT SIZE="+4"> 


1 القت اب“ 
اتح خد . ا سے ن 
mam a FF aa.‏ 1 


1 


خط هّ ُ0 ص 


ال“ 
4 


9 لته ضند هدا 
و ا 


1 ath س َ ج‎ 1 1 7 n a N 
1 ا س 1 ازرد‎ 1 
5 نطبم الخقصضق لے اکر تسا ندا اه احج ج اللحصو ص‎ 


حتی 8 ان خاو ا كتادة آرقام آگیر أو أصغر شما فعلت هنا بكتارة الحجمح 3 1 
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والآن أعرف ماذا تريد أن تسألء ستقول لقد ثبت حجم الخط على حده الأدنى عند 
الدرجة -2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة من وجود الدرجات 
الأخرى الأقل من -2 والأكبر من +4؟ 


حسنا وأنا أجيبك بسؤال آخر: ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل 
الصفحة إلى 1 بدلاً من 3؟ (وسوف نقوم بذلك فعلاً بعد قليل)» ألا نحتاج في هذه الحالة 
إلى الدرجات من +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم 
إفتراضي ألا نحتاج إلى الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن 
نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الإحتمالات الواردة. 


أرجو أن يكون هذا الجواب قد أقنعك :۔) 


وهذه بعض الأمثلة لتوضح لك كيفية استخدام هذا الوسم» وسوف أرفق نتيجة كل مثال 
بعده مباشرة. 


<FONT FACE="arial" SIZE="6" COLOR="#6633ff' > 
This font is Arial, Size is 6, Color is Red 

</FONT> 

This font is Arial, Size is 6, Color is Blue 


<FONT FACE="arial" SIZE="+3" COLOR="#FFOOOO"> 
This font is Arial, Size is +3, Color is Red 
</FONT> 
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This font is Arial, Size is +3, Color 
is Red 


<FONT FACE="Arial" SIZE="5" COLOR="#OOFFOO"> This 
</FONT> 

<FONT FACE="Times New Roman" SIZE="7" 
COLOR="#FFOOFF"> is </FONT> 

<FONT FACE="Arial" SIZE="2" COLOR="#FFOOO00"> multi 
</FONT> 

<FONT FACE="Impact" SIZE="4" COLOR="#000000"> 
colors, </FONT> 

<FONT FACE="Courier" SIZE="2" COLOR="#O0O0O0OFF"> multi 
</FONT> 

<FONT FACE="Times New Roman" SIZE="3" 
COLOR="#008080"> faces, </FONT> 

<FONT FACE="Courier" SIZE="6" COLOR="#FFFFOO"> and 


</FONT> 

<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi 
</FONT> 

<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes 
</FONT> 


<FONT FACE="Times New Roman" SIZE="7" 
COLOR="#OOFFFF"> text </FONT> 


This 1S multi COlOrS, multi faces, and multi sizes text 


<FONT FACE="lImpact" SIZE="6" COLOR="#000000">C 
</FONT> 

<FONT FACE="lImpact" SIZE="6" 
COLOR="#008080">O</FONT > 
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<FONT FACE="Impact" SIZE="6" 
COLOR="#FFOO00O0">L</FON T> 
<FONT FACE="Impact" SIZE="6" 
COLOR="#O0O0OOFF">O</FONT> 
<FONT FACE="Impact" SIZE="6" 
COLOR="#800000">R</FONT > 
<FONT FACE="Impact" SIZE="6" 
COLOR="#FFOOFF">S</FONT> 


COLORS 
.>8۸؟S٤۴0N‎ 1< ننتقل الآن إلى الوسم الثاني من الوسوم الخاصة بالخطوط وهو‎ 


وعمله هو تحديد نوع الخط وخصائصه بالنسبة للصفحة كلها . أي أنه يقوم بتعريف 
نوع الخط الأساسي الذي سيستخدم في الصفحة من بدايتها إلى نهايتها ويحدد لونه 
وحجمه. 


هل لاحظت انه وسم مفرد ولا يحتوي على وسم للنهاية؟ بالطبع ما الحاجة إلى وسم 
النهاية طالما أنه يتعامل مع الصفحة ككل ومع الإعدادات الأساسية لهاء وليس مع كلمة 
أو سطر أو فقرة بذاتها. لذلك فإن هذا الوسم يكتب عادة في أول الملف» ويفضل مباشرة 
بعد وسم <۷ 805>. أما الخصائص المستخدمة معه فهي نفس الخصائص سالفة 
الذکر مع <آ ۴۵> › (نستطیيع استخدام الخاصیية ٥ہ‏ ھ× معهھ بدلا من ٥ceھ۴).‏ 
وبنفس الطريقة وبدون أي اختلافات. وإليك هذه الشيفرة كمثال: 


<BASEFONT Name="Arial" COLOR="#FFOO00O" SIZE="5"> 
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وبدراسة هذا المثال ذ نستنتج آنه يقوم بتعديل الخط الافتراضي للصفحة بحيث يصبح 
نوعه 1و۸ وحجمه 5 ولونه أحمر. وبالتالي فان كل النصوص المكتوبة في تلك 
الصفحة سيطبق عليها هذا النمط من الخط . مالم نقم طبعا باستخدام الوسوم <Font>‏ 

.. </۴۲> لتعدیلھا والتحكم بمظهر ها كما فعلنا في الأمثلة السابقةء فهي آكثر تحديداً 
وأكثر مرونة من gllسwم <BASEFONT>‏ . 


وبمناسبة الحديث عن الألوان وتغيير اللون الأساسي لنص الصفحة. ألا تذكر أننا في 
الدرس السابق تكلمنا عن الخاصية ٥×٤‏ التي تكتب مع الوسم <رلdه‏ 8> والتي 
استخدمناها لتحديد لون نص الصفحة... أنا لا زلت أذكر ذلك. 


لا يوجد تعارض بين هذه الخاصية وخاصية C١010‏ في لوسم <BASEFONT>‏ 
فأآنت بكل بساطة تستطيع استخدام أي منهما في صفحتك. وإذا حدث واستخدمت کلاهما 
فإن اللون المحدد مع الوسم <1 >8۸S٤۴0N‏ هو الذي سيطبقه المتصفح ويعتمده. 


وهنا أريد أن أذكرك بما قلته في بداية هذا الدرس: 


یوجد دائها أڪثر هن طريةة 
لأحاء نفس العمل 
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هناك وسوم خاصة تستخدم لتمييز العناوين Headings‏ في صفحات الإنترنت وهي: 


</Hn> ... <Hn> 


وحرف ۾ هو رقم بین 6-1 يمثل مستوی العنوان. 
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<H1> Heading 1 </H1> 
<H2> Heading 2 </H2> 
<H3> Heading 3 </H3> 
<H4> Heading 4 </H4> 
<H5> Heading 5 </H5> 
<H6> Heading 6 </H6> 


Heading 1 


Heading 2 


Heading 3 
Heading 4 
Headine 5 


Heading û 
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ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص. وفيما يلي 


الوسوم الخاصة بها متبوعة بمثال ونتيجته: 


خط الغامق (الأسود العريض)» ونستخدم له الوسوم التالية: 


<B> Bold Text <B> 
<STRONG= Strong Text SSTRONG™ 


الخط المائل 


<J> Italic Text I< 


EMT Emphaslized Text <EM> 


الخط المسطر 


U™ Undelined Text <Ul™= 


الخط المرتفع 


<S UP= Superscript Text SUP= 
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<B> ... </B> 


<STRONG> ... </STRONG> 


This 1s Bold Text 


This Is Strong Text 


>|< ... >/|< 
<EM> ... </EM> 


This Is Italic Text 


This Is LEmphasized Text 


<لا/> ... <> 


This 1s Undelined Text 


<SUP> ... </SUP> 


Superscript Text 


This Is 
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» *« 1 الخط‎ 
<SUB> ... </SUB> 


ThiS 1S Subseript Text <SUB= Subscript Text <SUB= 


خط کر 
<BIG> ... </B|IG>‏ 


This is Big Text <BIG> Big Text </BIG> 


<SMALL> ... </SMALL> 


<SMALL= Small Text YSMALL= 


This is Small Text 


<STRIKE> ... </STRIKE> 
<S> ... </S> 


This is StHeed Fey STRIKE>= Striked Text SSRTIKE= 
0ن تابب وز¡ وآ‎ <Sz> Striked Text S> 


نص الاآلة الطابعة ممر 1۶1٥۲‏ 
<I>... </I>‏ 
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This 1S TeleType Text <TT= TeleType Text <TT= 


وهذا النص يعرف أيضا بالنص موحد المسافات 1٥×)‏ dع4cدم0,05[.‏ ولتوضیح 
هذا المفهوم إليك المثال التالي: 


إذا أخذنا الحرفين ,م وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي 
شغلها الحرف n‏ هي أضعاف المساحة التي شغلها الحرف ¡ 


111111111 
MMMMMMMMMIM 


أما عند استخدام الوسم >/١1< ... >٣۲<‏ فإن المساحة التي يشغلها كلا الحرفين 
تصبح موحدة 


LILLLLLIILIL 
mmmmmmmmmm 


وهذه أمثلة تجمع بين عدة تنسيقات معاً: 


<B><|><U> 
This is a Bold, Italic and Underlined Text 
>/UJ> </|> </B> 
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This is a Bold, Italic and Underlined Text 


<FONT COLOR="#6633ff="+3"><U><|> 
This text is red, size +3, ltalic, and Underlined 
</I> </U> </FONT> 


This text is red, size +3, Italic, and 
Underlined 


وقد أردت من هذه الأمثلة توضيح مسائل معينة أولها: أن بإمكاننا استخدام عدة وسوم 
وتنسيقات معا في نفس الوقت ولنفس المقطع من النص. (وذلك لجميع الوسوم وليس 
فقط لوسوم الخطوط). وكما ذكرت سابقاء لا أهمية لترتيب هذه الوسوم ولا أيها ورد 


ع ٠‏ 
أولا... 


عند استخدام الوسوم المتعددة في مقطع واحد يجب مراعاة عدم التداخل بينها!... كيف؟ 
أنظر إلى الرسم التالي: 


u la اق‎ El in 
ارسوم فعداخلة ببعضها البعشض‎ 
الوسوم الت بترتيب معين الوسم الذي نذأ به ألا هيه ايا‎ 
ميث بنش الثربب راگس صحیج‎ 
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فكتابة الوسوم السابقة بالطرق التالية هو خطاً: 


<B><|><ÛU> 
This is a Bold, ltalic and Underlined Text 
</B> </l|> </U> 


<B><|><U> 
This is a Bold, ltalic and Underlined Text 
</B> </> </|> 


أعرف آنك لم تصدقني وأنك قمت بتجربة هذه الوسوم وربما حصلت علي نتيجة 
صحيحة . حسناً العبرة ليست في عبارة واحدة مكونة من وسمين أو ثلاثة تكتبها في 
ا 
في ملف خال من الأخطاء المنطقية والتداخلات التي قد تسبب الإرباك للمتصفحات» 


وتؤدي إلى عدم عرض هذه الصفحة بالشكل المناسب والمطلوب. 


لذلك فأهمية أن تتجنب وجود الوسوم المتداخلة في صفحتك هو بنفس الأهمية التي يجب 
أن توليها لكتابة هذه الوسوم بالصورة الصحيحة إملائياً . وإلا فالمتصفحات لا ترحم. 
وكثيرة هي المرات التي حصل فيها المصممون على صفحات منهارة بسبب نسيان 
حرف واحد أو إشارة مثل < أو > أو '" 


باختصار شديد... وكقاعدة أساسية» الصفحة المصممة جیداً هي الصفحة ذات الوسوم 
الصحيحة وغير المتداخلة. 


وصالنا الآن إلى نهاية هذا الدرس. أتمنى أن تكون قد قضيت وقتاً ممتعاً معه. وأن لا 
يكون قد أحدث تداخلاً في وسوم أفكارك. أراك في الدرس التالي. 
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HHHHHHHHHHHHHH 
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الدرس الرابج 


الفقر ات و القو ائم 


أهلاً وسهلاً بك إلى الدرس الرابع من كتاب تعلم M1‏ 11. 


في هذا الدرس سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص وترتيب الصفحات 
وتنسيقها بشكل عام. 


صحيح أن استخدامك للألوان والرسومات في الصفحة يضفي عليها نوعاً من الحيويةء 
وأن الخطوط تعطي صفحتك رونقاً وجمالً. لكنك إن لم تهتم بترتيب صفحتك أو تقضي 

بعض الوقت في تنسيق هيكلها العام وتنظيم فقراتها وقوائمهاء فإنه من الصعب عليك 
الحضول غل فد ويب لاجد فالترتیب هو الخطوة الأولى لجذب اهتمام الزائر أو 
القارئ لصفحتك وتسهل عليه فهم الخطوط العريضة للصفحة. 


لقد قمت في الدرس الأول بايضاح بعض الوسوم الخاصة بالفقرات. ولا بأس من تذكيرك 
بها. فالوسم <۲> يقوم بإنهاء الفقرة. والوسم <8> ينهي السطر الحالي وينقل 
النص إلى سطر جديد. والوسم & ;مط يقوم باضافة الفراغات» ويجب تكرار كتابته 
بنفس عدد الفراغات المطلوب. 


ونتابع في هذا الدرس مع هذه الوسوم وغيرها. 
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لقد قلت إن الوسم <۲> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج <۲> ... 
<۴/> وفي هذه الحالة يمكننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم 
معه الخصاثص .DIR ›A۸ L]6N‏ 


فالخاصية ۸116١‏ تحدد محاذاة الفقرة وهي تأخذ الئقيم Center, Right «Left‏ 
وأوضحها بالأمثلة التالية: 


<P Align="left"> This is a left-aligned paragraph </P> 
This is left-aligned paragraph 


<P Align="right"> This is right-aligned paragraph</P> 


This is a right-aligned paragraph 


<P Align="center"> This is a centered paragraph</P> 


This is a centered paragraph 


كذلك لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة نستطيع استخدام الوسوم 
<CENTER/> ...<CENTER>‏ 


<CENTER> This is a centered text </CENTER> 


This 1s a centered text 


51 


www. dinaro. com/ vb3 


أما الخاصية 1R‏ والتي نستخدمها أيضاً مع <۴> فتقوم بتحديد إتجاه قراءة النص 
وتأخذ القيم 


(Left 10 Riğئ) اتجاه النص من السار إلى اليمين‎ | 1R 


(Right 1o0 Left) اتجاه النص من اليمين الى الیسار‎ | R1 


تذكر هذه الخاصية جيداً فهى مهمة عند كتابة صفحات باللغة العربية 


ولتنسيق الفقرات أيضاً يوجد الوسوم 


>/BL[OCKQUOTE> ... <BLOCKQUOTE>‏ أي وسوم الفقرات 
المقتبسة. ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على الهامشين الأيمن 
والأيسر لها. 


أنظر إلى الفقرة التالية التي قمت (باقتباسها) من إحدى صفحات هذا الموقع. ومن ثم 
وضعتھا ضja </IBLOCKQUOTE> ... <BLOCKQUOTE>‏ 


والحقيقة أنك تستطيع وضع عدة وسوم معاً إذا أردت إدراج هوامش أکبر. كما في 
المثال التالي: 
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<BLOCKQUOTE> 
<BLOCKQUOTE> 
النص يكتب هنا‎ 
</BLOCKQUOTE> 
</BLOCKQUOTE> 


وبالطبع ليس شرطاً أن تستخدم هذا الوسوم مع الفقرات المقتبسة فقط. فأنا مثلاً 
أضعها في بداية ونهاية كل صفحة من صفحات هذا الموقع. وبالتالي يظهر النص بعيداً 
قليلاً عن حاشية الصفحة فهذا أفضل من أن يكون ملاصقاً لها وأجمل. 


{Ur TO 
MNORKROO 
7J £ ے‎ ٦ VW 
O5 -MmM> 


ريما توصلت إلى أني استخدمت عدداً كبيراً من وسوم الفراغات &:مءطد ونهاية 
السطر <۸ 6>. 


حسناًء إستنتاجك لا بأس به ولكنه ليس دقيقاً فأنا لم أستخدم أياً من هذه الوسوم هنا. 


بل كل ما فعلته بعد إعداد هذا الشكل هو وضعه ضمن: 


<PRE> ... </PRE> 
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وهما اختصار Ûكkأnة Preformatted‏ أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا 
الشكل بالتنسيق المسبق الذي تم إعداده به. لكن تم تحويل الخط إلى خط موحد 
لمسافات (راجع الدرس السابق) ولو لم أقم بوصعه صمن هذه الوسوم لكانت النتيجة 
كالتالي: 


ABCDEFGHIJKLMNOPQRST 


لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها إلى تنسيقات متعددة 
للخطوط أو الألوان. بل فقط مع الفقرات العادية موحدة الخط والتنسيقات. 


القوائه 


تحتوي لغةَ H111‏ على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم 
وباستخدام عدة خيارات. وهناك نوعين من القوائم: 


أولھما الnتıطluة .Lists Ordered‏ 
واليك المثال التالي عليها 


أسماء بعض المدن الفلسطينية : 
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1. القدس 
2. نايلس 
6 رام الله 
4. الخليل 
5. جنین 
6. طولكرم 


وثانيهما القوائم غير المتسلسلة tsئا €n 0de r٥4‏ وھذا مثال عليھا 


أسماء بعض الجامعات الفلسطينية : 


.جامعة القدس المفتوحة 
.جامعة بیرزيت 


.جامعة الخليل 


عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة 
ووسوم تحدد بنود هذه القائمة. 


بالنسبة للقوائم المتسلسلة نستخدم الوسوم 
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أما بالنسبة للقوائم غير المتسلسلة فنستخدم 


</OL> ... <OL> 


<>/UL> ... <J|> 


ولتعيين كل بند من بنود القائمة نستخدم الوسم <1> وهو وسم مفرد يكتب 


في بداية السطر الخاص بكل بند ع)] tءذ.‏ 


إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشيفرة التالية: 
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<OL> 

القدس<| 1> 
نابلس<|1> 
الله رام<اا> 
الخليل<|1> 
جنین <| > 
طولکرم<| 1> 
</OL:‏ 


<ال€ا> 

النجاح جامعة<|1> 

جامعة القدس المفتوحة<| 1> 
بیرزيت جامعة<| > 

جامعة الخليل <| 1> 
<الJ/>‏ 
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والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي 1۷۲۴٤‏ ووظیفتها تحدید شكل 
الرمز الظاهر مع بنود القائمة» وعادة تستخدم مع وسوم بداية القوائم <0> أو 
<0> وبذلك نحدد رمزاً واحداً لكل القائمة. 


ولكن نستطيع استخدامها أيضاً مع وسم البنود <1> لإعطاء تحكم أكبر في مظهر 
القائمة من خلال تحديد رمز مختلف لكل بند. 


فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: ¡ ,1 ,ه ,۸ التي تغير رموز 
الترقيم من الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف 
اللاتينية الكبيرة أو الصغيرة› أو باستخدام الأرقام الرومانية كما ترى في الجدول 
التالى: 


3 


<OL TYPE="i"> SOL TYPE="I"> [SOL TYPE="a"> |[<OL TYPE="A"> 


| | 2 4 
11 آ1‎ . B 
111 11 0 ( 
1 IV J ) 
1 ¥ Ê | 


والحديث عن هذه الخاصية يقودني إلى الحديث عن مسألة مهمة في لغة M1‏ ]ا 
وهي مسالة الوسوم والخصائص المحددة بمتصفح معين دون غيره أي التي تعمل مع 
احد المتصفحات ولا تعمل مع غیره. 
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والسبب في ذلك أن هذه الخاصية تستخدم أيضاً مع القوائم غير المتسلسلةء لكن ليس 
بصورة مطلقة...كيف؟ أنت ترى أن الرمز الموجود عند كل بند في القائمة هو عبارة 
عن نقطة سوداء يطلق عليها اسم ء01 وهي المعرفة ضمناً في خاصية ۲۴٤‏ ۲۷. 
لكن هناك رموز أخرى يمكن إظهارها وهي المربع ٠إدںهي»‏ والدائرة المفرغة 
ماءrع‏ وتعرف بالشكل التالي: 


<UL TYPE="square"> 
<UL TYPE="circle"> 


ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع متصفح نيتسكيب وليس 
مع مايكروسوفت إكسبلورر الذي يتعامل فقط مع القيمة الإفتراضية للخاصية. (رجاء لا 
يغضب مستخدمو إكسبلورر فهناك الكثير من الوسوم والخصائص التي لا يستطيع 
نيتسكيب عرضها أيضا). 


غير المتسلسلة» وبنفس الطريقة المستخدمة مع <01 >...<01/> وهذه الوسوم 
هي: 


1 


<DIR> ... </DIR> 
<MENU> ... </MENU> 


هناك نوع خاص من القوائم يدعى قوائم الشرح أو llتعريفIت Definition Lists‏ 
وكما يدل الإسم تستخدم عندما نريد إدراج قائمة من المصطلحات يتبع كل واحد منها 
شرح او تعلیق. 
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HTML 
Hyper Text Markup Language 
WWW 


World Wide Web 
FTP 
File Transfer Protocol 
GIF 
Graphical Interchange Format 
JPG, JPEG 
Joint Photographic Experts Group 


ونحتاج لإنشاء هذه القوائم إلى تثلاثة وسوم: 

الأول <1 (> ... <91/> لتعريف بداية ونهاية القائمة. 

والثاني <1(> ويوضع قبل كل مصطلح لتحديده» وهو وسم مفرد. 
أما الثالث فهو <((> وهو وسم الشرح أو التعليق وهو أيضا مفرد. 


ولنقم الآن بكتابة شيفرة القائمة السابقة 


<><DL> 

<DI>HTML <DD>Hyper Text Markup Language 
<DT>WWW <DD>World Wide Web 

<DI>FTP <DD>File Transport Protocol 
<DI>GIF <DD>Graphical Interchange Format 
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الصور والر سومات 


أهلاً وسهلاً بك إلى الدرس الخامس من كتاب تعلم .H1 M1‏ 


في هذا الدرس سوف أقوم بالحديث عن الصور والرسومات وما يتعلق بالتعامل معهاء 
بالإضافة إلى التعريف بأنواع الملفات الرسومية الدارجة في الإنترنت. 


لقد اقتصر حديثنا عن الصور حتى الآن على إضافة خلفيات للصفحات» وكان ذلك في 
الدرس الثاني أما إدراج الصور ضمن الصفحات نفسها فله حكاية أخرى» أبدأً بروايتها 
لك الآن. 


إن الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو >1M16<‏ وهو 
وسم مفرد. لكن هل يكفي هذا لإدراج صورة؟ کلاء بالطبع يجب أن نحدد الصورة التي 
نريدها. لذلك نضيف الخاصية له 98١‏ لتحديد موقع واسم الصورة. 


الصورة التالية إسمها alah.jpg‏ وعندما قمت بادراجها. كانت الشيفرة الخاصة بذلك 
هي 


1 


<IMG SRC=" alah.jpg "> 
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والصيغة هذه تفترض أن الصورة موجودة في نفس الدليل الفرعي أو المجلد حيث 
يتواجد ملف ]1[ الذي أعمل عليه» وقمت باستدعاء الصورة من خلاله. لكن ماذا 
لو كانت الصورة في مجلد فرعي آخر؟ حسنا سوف اناقش معك حالتين لهذه المسألة. 


الحالة الأولى: أن تكون الصورة موجودة في مجلد متفرع عن المجلد الموجود به 
ملف ]11[ حسب الشكل التالي: 


2 ÛÛ webl 
الملف حيث تتو اجد الصررة سه دعوةم ا‎ 
€ page.html . Ft خln‎ 


سطر الننيفرة 


<IMG SRC="images/alah.jpg"> 


نقوم في هذه الحالة بكتابة إسم هذا المجلد تتبعه إشارة / ثم اسم الصورة. 
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الحالة الثانية: أن يكون ملف ]11 موجوداً في مجلد ما وتكون الصورة موجودة 
في مجلد آخر بنفس المستوى. أي آنهما مجلدين متجاورين وليسا متفرعين أحدهما عن 
الاخر. 


ZÛ web1 

E page. hinl — hf MÎ] لف‎ 
ZI images 

الصورة ومز داد 8 


سطر النئنيقر ت 
<IMAG SRC=",./images/alah.jpg">‏ 


وفي هذه الحالة نكتب .. (نقطتين) لتوجيه المتصفح للخروج من المجلد الفرعي الحالي 
(حيث يوجد ملف )]1M1]‏ ومن تم الدخول إلى المجلد وم عو حيث توجد 
الصورة. 


وبشكل عام» مهما كانت مواقع تواجد الملفات فإن عملية تحديد مواقعها والوصول 
إليها لا تخرج عن نطاق هذا النمط من الشيفرة. أي كتابة النقطتين للخروج من مجلد 
فرعي» وكتابة اسم المجلد الذي يجب الدخول إليه. 


إن الأبعاد الأساسية لهذه الصورة هي 145×200 بيكسل 1ء×ذ۲ (تابع القراءة حتى 
نهاية هذا الدرس وأعدك أن أوضح لك ما هي وحدة البيكسل إذا كانت هذه أول مرة 
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تتعرف فيها على هذه الوحدة) وكما تلاحظ تم إدراج الصورة مع المحافظة على هذه 
الأبعاد. ومع ذلك فنحن نستطيع التحكم أيضاً بها وإظهار الصورة بالحجم الذي نريده 
من خلال هدا الوسم. كيف؟ بإضافه الخصانص HE[GH 1, 151۴٤1‏ متبوعە 
بارقام تمثل الإرتفاع والعرض المطلوبين. 


<IMG SRC="alah.jpg" HEIGHT="70" WIDTH="120"> 


www.dinaro:cOm/vb3 
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الخاصية التالية التي تستخدم مع <116> هي ۸11 وفيها نحدد نصا بديلاً يظهر 
مكان الصورة. وهذا النص يلاحظ خصوصا عندما يكون خيار ""إظهار الصور تلقائيا"" 
غير فعال في المتصفح. كما تستطيع ملاحظته في الفترة التي تسبق تحميل الصور 
وخاصة في المواقع بطيئة التحميل. 


<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock"> 


عندما نقوم بإدراج صورة ضمن فقرة فان موقع ظهورها يتحدد بالطبع حسب ترتيب 
ورودها في الفقرةء متلها مئل اي كلمه أو عبارة آخری. ونستخدم اlخاصيۂ ALIGN‏ 
لتحديد محاذاة الصورة مع النص المرافق لها أو لنقل بعبارة أخرى: تحديد موقع النضص 
الذي يليها بالنسبة لها وهي ةİÎخذ‏ lئقيم: BOTTOM, TOP, MIDDLE,‏ 
R]GH1 LEFT‏ وأوضح لك تأثير كل قيمة كما يلي: 

قي الحالة العادبة رمتل هذه) و عندما ا نقوم بتحذيد آي محاداةٌ فان النص الذي يلي 

الصورة يظهر بمحاذاة الحافة السفلى لها. وهذه هي الحالة الإفتراضية لظهور الصور والتي 

تمتلها القيمة 80TTO0M‏ 

<IMG SRC="image.jpg" ALIGN="BOTTOM'"= 


TOP 


ند اح : أ EY‏ ا ا 1 ا اأ 1[ 1[ 4 
0 نحدذنذ شدذةذ القبمةك فان السضر الأول من النص الذی پل الصورة يفم 


a e ا‎ 8 . mm 41 Î +4 TNMs Ù #*U 
بمحاداة الحافة العليا لها. اما باقى النص فم أ فلها,‎ 


<IMG SRC="image.jpg" ALIGN="TOP"= 


MIDDLE 


ا ت ٣ hb i 1 i 27 NN‏ “اغ iM + e‏ 
ام عند تحديد هده الفيمه قان السطر ا ول من اللصس بقع بمحاذاة متلصف الصوز د, 
ب : و 


كذلك فإن باقي النص يمتد أسفلها. 
<IMG SRC="image.jpg" ALIGN="MIDDLE"=‏ 
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LEFT 


. ا د آ ii i‏ ا إ i‏ ا ۴< $ 
هذه الفيمه تؤدى إلى محاذاة الصورة الى اقصى اليسار. مع التقاف النص الذدى 
7 2 7 1 ا ۴ ت ا ک 
أا عا أ فك أا أجذة اا ١ =| EY‏ 1 
للها على ١‏ لحه اللملىی و لعذد اسنضرز حخسبا زلف ج لصو ر د. aê‏ 


<IMG SRC="image.jpg" ALIGN="LEFT"> 


RIGHT 


أما هذه القبمة فته دى ال محاذاة الصه, 5 ال أقص الس لفات اا 
[ اها هده الفيمه شؤدي إلى محاذاة الصورة إلى افتصى اليمين. مع التفاف النصس 
| لذ , بها غل الحهة الس م ولعدة سط کح ار تفاع اأ 

لذي ليها على الجههة اليسر ى ولعذد اسصرز حسببا رلفاح الصوررة. 


<IMG SRC="image.jpg" ALIGN="RIGHT"> 


والآن بعد أن قمنا بتحديد محاذاة الصورة نحتاج إلى تحديد المسافة الفاصلة بينها 
وبين النص الذي يجاورها. ونستخدم لذلك الخصائص التالية: 


SPA )#٤‏ ۷ لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى 


:]5PA ٤‏ لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى 


<IMG SRC="alah.jpg" ALIGN="RIGHT" VSPACE="20" 
HSPACE="20"> 
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اأتتحة هدو الشف 2 ست 1 المسما 
لننيجه: هذه السيفز د ستذر جح الصيور د الصتنصاة 
چ Fi «< ۴ e"‏ - 
e. £‏ آ] مع محاداتها ليمين الصفحه 
وإضافة مسافة فار غة مقدار ها 20 بيكسل 


اى , الحهات الأر بعة قار رم بب هذا الاحنا 
علي انج فر ا الا ١‏ ل کے ۶ ہے 
والإطار السابق الذي وضحت فيه خاصية × ۸116 مع 
b‏ 7 س 
r IT‏ پس . bı e‏ ج س 4« MM‏ سے 
اانه 1 .RlitrH‏ و ا حط المتاقهك بل الصور ةث و النص 
الى افة , اسا 


الخاصية الأخيرة والتي تستخدم مع الوسم <6 1۷> هي 80۸5٤۴‏ ووظيفتها 
إضافة إطار حول الصور والتحكم بسمكه. وهذه الخاصية تستخدم بشكل خاص عند 
تعيين صورة ما كوصلة تشعبية. ويتم التحكم بالسمك من خلال إسناد رقم يمثل السمك 
بالبيكسل, والقيمة الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة. 


مثلاً لإضافة إطار سمكه 5 بيكسل نكتب الشيفرة التالية: 
<IMG SRC="image.jpg" BORDER="5">‏ 


والآن حان الوقت لكي نناقش معا بعض الأمور التي تتعلق بالصور والرسومات بشكل 
عام. 


ٍ هل حاولت أن تتعرف على أنواع الملفات الرسومية التي تقوم بتحميلها خلال 
تصفحك لمواقع الإنترنت؟ 
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يزخر عالم الكمبيوتر بالعشرات من أنواع الملفات الرسومية وتنسيقات الصور. وكل 
منها يختلف عن غيره من عدة نواح» أذكر لك منها: الدقةء وعدد الألوان التي 
يستوعبهاء والحجم التخزيني للملف. لكن هناك نوعين فقط من هذه الملفات يتم 
تداولهما حالياً في الإنترنت وهما: 


JPG, JPEG 


إختصار د‫ .Group Experts Photographic Joint‏ ویدعم هذا التنسیق صوراً 
بعيار 24 بت (أي 16.7 مليون لون). وميزة هذا التنسيق تتمثل في إمكانية ضغط 
الصور بنسب مختلفة عند تخزينها وبالتالي الحصول على صور صغيرة الحجم 
نسبياً.(أعني هنا حجم التخزين بالكيلوبايتات وليس أبعاد الصورة). لكن بالمقابل كلما 
إزدادت نسبة الضغط وصغر حجم الملف كان ذلك على حساب الجودة والوضوح. 


GIF 


إختصار ل اhicaۆGrap Format interchange‏ وأقصی عدد للألوان في هذا 
التنسيق هو 265 لون. ومع ذلك فإن أحجام الصور المخزنة به كبير نسبياً مقارنة 
بتنسيق ۶6[. لكن هناك مزايا رائعة ينفرد بها تنسیق G1۴‏ مما يستدعي استخدامه 
في صفحات الويب» أولها القدرة على تخزین صور بخلفیات شفافة Transparent‏ 
ئ6 وتانيها الصور المتحركة Animated Gifs‏ 


وتجد معلومات وافية ودروساً مفصلة حول هذه المواضيع ضمن دروس اذم" 
«Shop Pro‏ 


والآن قد تسأل» أي من هذين التنسيقين أستخدم في صفحاتي؟! لا يوجد جواب قطعي 
لهذا السؤال لكن إليك هاتين المعادلتين: 
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=[P٤‏ الصور الحقيقية ذات العدد الكبير من الألوان» وذات الأبعاد الكبيرة 
6۴- الصور قليلة الألوان وصغيرة الأبعاد مثل الأزرار. 


۽ ماهي درجة استبانة شاشتك t٥,‏ ں‌آاموه8؟ إذا كنت لا تعرف الجواب قم بفتح 
تطبیق لوحة التحكم في ویندوز 95 وإختر أيقونة(العرض) تم اختر التبويب (!عدادات) 
وهناك سوف تشاهد '"'مساحة سطح المكتب"'' الذي يدل على درجة إستبانة الشاشةء 
وعلى الأغلب ستكون 480×640 أو 600×800» وهناك درجات أعلى تعتمد على 
قدرة محول العرض. كذلك سوف تشاهد "لوح الألوان"' الذي يدل على عدد الألوان 
التي يمكن عرضها بالإعدادات الحالية للشاشة. 


أما في ويندوز 3.11 أو 3.1 فاختر أيقونة برنامج إعداد 0s‏ لم۷1 من لوحة التحكم 
فتظهر لك قائمة تجد بضمنها نوع وإستبانة الشاشة. 


هذا الحديث يقودني إلى وحدة البيكسل [ع×ز۴ (ألم أعدك مسبقاً بتوضيحها). وهي 
اختصار ل .Picture Een)‏ إذا كانت شاشتك بإستبانة 480×640 فهذا يعني 
أنها مقسمة(نظرياً) إلى شبكة من 640 عمود و480 سطر. وبمنتهى البساطة» إن كل 
خلية من هذه الشبكة تمثل بيكسل وبالطبع كلما زادت الإستبانة كلما صغر حجم وحدة 
البيكسل. 


هل سبق لك وأن سمعت بمصطلح زور طہں ط۲ ضمن مصطلحات الإنترنت؟ 
حسناًء لا تلتفت إلى الترجمة الحرفية لهذه الكلمةء والتي تعني '"'ظفر الإبهام"'". 


فالمقصود حفيقة بها هي تلك الصورة الصغيرة جدا التي تقوم بالنقر عليها فتؤدي إلى 
عرض صورة بحجم أكبر. لذلك قد يكون المصطلح الأنسب لوصفها هو ''العينة''. 
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(وإذا كنت قد زرت أحد المواقع الإخبارية لرأيت كيف يتم عرض عينات وصور 
مصغرة للقطات الأحداث وعند النقر على العينة تظهر الصورة الأصلية. إذن أنت لست 
مجبراً على الإنتظار لوقت طويل لحين ظهور صورة ذات حجم كبير للقطة لست معنياً 
بها). 


ومن الواضح أن استخدام العينات مفيد وعملي جداً وأن وضعها في المواقع التي 
تحتوي على العديد من الصور يؤدي إلى تقليل الزمن اللازم لتحميل الصفحات وتجنب 
ضياع الوقت بانتظار ظهور الصور الأصلية كبيرة الحجم. لأنها تعطي الزائر الحرية 
في النقر عليها إذا رغب في روؤية الأصل أو تجاهلها. أما كيف يتم عمل هذه العينات؟ 
فذلك باستخدام أحد برامج معالجة الرسوم کبرنامج 0pط؟‏ ٤ہذھ۲ .۴١‏ من خلال 
تصغير أبعاد الصور الأصلية إلى النسبة المطلوبة. 


أعرف ماذا ستسأل الآنء ستقول ألم نتعلم قبل قليل كيفية عرض الصور مع التحكم 
بابعاد ها؟ ألا يؤدي استخدام الخصانص HE]G HT ۰۷151٣1‏ إلى التحکم بحجم 
الصور وعرضها بنسب مصغرة حسب ما هو مطلوب؟ 


إن استخدامك لهذه الخصائص يؤدي إلى إظهار الصورة بحيث تبدو مصغرة» لكنك 
فعلياً قمت بإجبار متصفح الزائر على تحميل الصورة بالحجم والأبعاد الأصلية ثم 
عرضها بالحجم المصغر أي أنك في النهاية لم تحقق الغاية من وجود هذه العينات. 


ت 
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11 T7 


HHHHHHHHHHHHHH 

HHHHHHHHHHHHHH 

HHHHHHHHHHHHHH 

HHHHHHHHHHHHHH 

HHHHHHHHHHHHHH 

HHHHHHHHHHHHHH 
HH 


أهلً وسهلا بك إلى الدرس السادس من كتاب تعلم .HTM1‏ 


sا«1...‏ أو الوصلات التشعبية هي روح الإنترنت. وإذا كانت الإنترنت بمجملها هي 
شبكة العنكبوت فان هذه الوصلات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات 
الوصل بين الملايين من مواقعها. تنقر على وصلة ما فتنقلك إلى صفحة أخرى في 
نفس الموقع... وتنقر على وصلة أخرى لتنقلك كلياً إلى أحد المواقع في الجانب الآخر 
من العالم... وصلة تجعلك تحمل ملفاً وأخرى تجعلك تشعل مقطعا موسيقياً وثالثة 
تعرض لك صورة... 


حسناًء من المؤكد أنك استنتجت الآن من هذه المقدمة أنك بصدد تعلم كيفية إدراج 
الوصلات التشعبية في صفحاتك... لقد صدق استنتاجك لذلك هيا إلى العمل... 


هناك عدة خيارات للوصلات التشعبيةء منها أن تكون الوصلة لموقع آخر» أو أن تكون 
لصفحة أخرى داخل الموقع نفسه» ومنها أن تكون لمكان آخر في نفس الصفحة (إلى 
أعلى أو أسفل على سبيل المثال) أو أن تكون وصلة لعنوان بريد إلكتروني انوہ-٤‏ 

وفي جميع الحالات فإن المبدأً واحد لكن تختلف بعض التفاصيل. وسوف أناقش معك 

كل حالة على حدة وبالتفصيل. 
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نستخدم الوسوم 


</A> ... <A> 


كوسوم أساسية لإدراج الوصلات التشعبية» وهي اختصار لكلمة مط« ۸. وهي لا 


HREF 


التي نحدد من خلالها الموقع الذي نريد الدلالة عليه ويجب أن يكتب عنوان الموقع 
کاملا. 


الحالة الأولى: إدراج وصلة تشعبية تشير إلى موقع خارجي. 


لنقم بإادراج وصلة تشعبية إلى أحد المواقع العربية الرائدة والرائعة» وهو موقع شركة 
صخر. و عنوانه 3ط p://www.D1«¬2۲0.c01/۷))ط‏ في هده الحاله یتم کتابھ 
الشيفرة بالشكل التالي: 


<A HREF="http:/Awww.Dinaro.com/vb3"> </A> 


لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر عليها لتشغيل الوصلةء 
وهذه يجب أن توضع بين الوسمين <4> ... <۸/>. أي لكي تكتمل الوصلة السابقة 
يجب أن نكتب معها أي عبارة نريدهاء لكي ينقر عليها الزائر فتنقله إلى العنوان 
المطلوب. ما رأيك بعبارة: 0٠٣د« 1٠‏ 60 والتي تصبح الشيفرة معها بالشكل 
التالى: 
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<A HREF="http://www.Dinaro.com/vb3">Go To Dinaro </A> 


وتظهر الوصلة كما يلي: 


Go To Dinaro 


لم تعجبك؟ ليس ذلك مشكلة فأآنت تستطيع كتابة أي شيء تريده كعنوان للوصلة التي 
تريدها. ما رأيك لو جعلنا كلمة هادم هي فقط العنوان لهذه الوصلة 


Go To <A HREF-="http:/Awww.Dinaro.com/vb3"> Dinaro </A> 


Go To Dinaro 


بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات كما تشاهد في الكثير من 
المواقع- وكل ما عليك فعله في هذه الحالة هو كتابة الوسم الخاص بإدراج الصورة 
بين الوسمين <4> ... >/A<‏ بالشكل التالي: 


<A HREF="http://www.Dinaro.com/vb3""><IMG SRC=" 
DINARO1 .gif"></A> 


والذي يودي إلى ظهور الصورة التالية كوصلة تشعبية لموقع ديناروا 
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(NOR: 3 


وبشكل عام فان أي شيء يوضع بين الوسمين <۸> ... <۸/> سوف يكون الوسيلة 
أو العنوان الذي ينفلنا إلى الموقع المشار إليه في الوصلة التشعبية» سواء كان هذا 
الشيء نصاً أو صورة أو كلاهما معاً. 


والآن هل تلاحظ الإطار الظاهر حول الصورة؟ وهل تذكر متى قمنا بالحديث عن هذا 
النوع من الإطارات؟ نعم في الدرس السابق. عند إدراج صورة كوصلة تشعبية يظهر 
حولها إطار سمكه 2 بيكسل وهذه هي الحالة الإفتراضية. وبالطبع نستطيع إزالته 
بكتابة الخاصية ٤R="'0"'‏ 80۸5 ضمن وسم الصورة. 


<A HREF="http I/Awww.Dinaro.com/vb3""><IMG SRC=" 
DINARO1 .gif" BORDER="0"></A> 


(iNOS n 


أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية. 


<A HREF="http Awww. Dinaro.com/vb3""><IMG SRC=" 
DINARO1 .gif" BORDER="7"></A> 
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(MOR na 


ننتقل الآن إلى الحالة الثانيةء وهي أن تشير الوصلة التشعبية إلى ملف موجود في نفس 
الموقع (أي ملف محلي) سواء كان ملف [1M]‏ أو صورة أو غير ذلك. وفي هذه 
الحالة فإن ما يكتب مع الخاصية 1R] E۴‏ هو اسم هذا الملف المطلوب الوصول إليه. 


لنقم بإنشاء وصلة تشعبية تقودنا إلى الصفحة الرئيسية لهذا الموقع وبالمناسبة فإن 
الملف الذي يحتويها اسمه ااط.×ء 14 › والشيفرة الخاصة بذلك هي: 


<A HREF="index.htmI">Main Page</A> 


Main Paqe 


وأذكرك بأنك تستطيع إدراج صورة هنا أيضاً كعنوان للوصلة التشعبية وذلك بنفس 
التفاصيل التي شرحتها في الحالة السابقة. 


هيا ندرج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية. 


<A HREF="image.jpg"><IMG SRC=" image _1.jpg" 
BORDER="0"></A> 


في هذا المثال قمت بتحديد الصورة المصغرة المسماه image _1.jpg‏ كوصلة تشعبية 
تصلنا إلى الصورة الأصلية المسماهہ image.j pg‏ 
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لكن إنتبه إذا كان الملف المطلوب والذي تريد الإشارة إليه موجوداً في مجلد مختلف عن 
المجلد الذي يوجد به الملف الحالي» فيجب عليك تحديد المسار الكامل لهذا الملف وذلك 


0 + 


بنفس الطريقة التي ناقشناها في الدرس السابق عندما قمنا يإدراج الصور. 


الحالة الثالثة هي أن نقوم بالإشارة إلى مكان آخر داخل نفس الصفحة» إلى أولها مثلاً أو 
إلى آخرها أو أي مكان آخر نريده... 


طبعاً مهما بلغت درجة الذكاء والألمعية التي يتصف بها الكمبيوتر ومتصفح الإنترنت› 
فهما لا يستطيعان معرفة ما يدور بفكرك وبالتالي لا يستطيعان معرفة المكان الموجود 
في نفس الصفحة والذي تريد نقل زائرك إليه من خلال الوصلة التشعبية. لذلك يجب أن 
تقوم آنت بتحديده. 


والمبدأ هنا هو أن تقوم بتعريف أو تسمية هذا المكان بإاسم معين سوف تقوم لاحقا 
باستخدامه في الوصلة التشعبية. وفي هذه الحالة يتحتم عليك استخدام الخاصية الثانية 
للوسم <A>‏ وهي NAME‏ 
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لنقم معا بإادراج وصلة تشعبية داخل هذه الصفحة تقوم بنقل الزائر من مكان وجود هذه 
الوصلة إلى الفقرة الثالثة من هذه الصفحة والتي بدآنا فيها الحديث عن الوصلات 
التشعبية Links‏ 


أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها داخل 
الوسوم <۸> ... <۸/> 


<A>LINKS</A> 


والآن حان الوقت لاستخدام الخاصية N۸ M۴٤‏ فالخطوة الثانية هي تعريف هذه الكلمة 
بأي اسم نريده (المهم أن نبقى متذكرين له). سوف أقوم بإعطاء الاسم 1ط1٣)اه‏ 


<A NAME-="attrib1">LINKS</A> 


لقد أصبحت هذه الفقرة جاهزة لكي نقوم بإدراج وصلات تشعبية إليها من أي مکان في 
هذا الملف» بل ومن أي ملف آخر ... وأكثر من ذلك أنه إذا أراد أحد ما في أحد المواقع 
الأخرى أن يضع وصلة تشعبية لها من موقعه فإن باستطاعته ذلك شرط أن يعرف الإسم 
الذي عرفناها به وهذا ليس صعبا بالطبع. 


الخطوة الثالثة هي إدراج الوصلة التشعبية لهذه الفقرة. 


ويلزمنا هنا معرفة اسم الملف الذي توجد به هذه الفقرة (أي هذا الملف الذي نعمل به) 
واسمه ادراط.06١٥ںط‏ لأنه سيشكل المدخل الأساسي للوصول إلى الفقرة المحددة. 
وتكون شيفرة الوصول إلى هذه الفقرة هي كالتالي: 


<A HREF="htutor06.html#attrib1">3rd Paragraph</A> 
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لاحظ أننا لم نكتف بذكر اسم الفقرة لوحدها بل يجب أن تقرن باسم الملف الأب الذي 
يتضمنها من خلال إشارة # 


أما الحالة الأخيرة والتي نقوم فيها بإدراج وصلة تشعبية لعنوان بريد إلكتروني» يؤدي 
النقر عليها إلى إطلاق برنامج البريد الإلكتروني للزائر بشكل تلقائي. 


فالإختلاف الوحيد الذي يطرأً هنا هو كتابة كلمة D]N.۸ R0‏ بعد خاصية HREF‏ لکي 
تدل على أن العنوان الذي يلي هو عنوان 61411 وليس أي عنوان آخر 


<A HREF="DINARO:DINARO2AYOUB@GMAIL.COM"> 
GMAIL</A> 


GMAIL 
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الدرس السابع 


الجداو ]11 


أهلاً وسهلاً بك إلى الدرس السابع من كتاب تعلم .H11 M1‏ 


هذا الدرس سيكون الأول من درسين حول الجداول. وقد فضلت تجزئتها إلى قسمين 
وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالات استخدامها في صفحات 
الويب. 


تعد الجداول من أقوى الأدوات التي تتضمنها لغة M1‏ ] وأكاد أجزم بأنه لا يوجد 
موقع في الإنترنت إلا ويستخدمها بصورة أو بأخرى. والحقيقة أن وضع الجداول في 
صفحات الويب لا يقتصر على تلك القوائم من البيانات التي نحتاج لترتيبها في صفوف 
وأعمدة» بل يتعدى ذلك إلى استخدامها في تصمیم الصفحات نفسها وتنظيمهاء والتحكم 
بمظهرها بصورة قوية وفعالة لا يمكن أداؤها مهما استخدمنا من وسوم خاصة بتنسيق 
الصفحات. 


إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثل أي أداة من 
أدوات H1]‏ لكنه قد يبدو لك مربكاً بعض الشيء وخاصة في البدايةء وذلك لتعدد 
الخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف بها. لكن لا تقلق فكل 
شيء يبدو صعبا في بدایته ولکن سرعان ما يصبح سهلا. 
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هل أنت مستعد يا عزيزي المتدرب؟ إذن هيا بنا.. 


بدايةء إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول 


>A BLE>.../TABLE>‏ | وسوم تعریف الجدول 


able Row‏ ا وسوم تعريف الصف في 


1 آ 
الجدول 


<TR>...</TR> 


4ط eاطa‏ "ا وسوم تعريف الخلايا في 


i‏ 8 2 4 ص س 1 ا 
الصف وتعریف محتویات کل خليه 


<TD> Cell Data <TD> 


والآن لنتكلم بصورة أكثر دقة وتفصيلاً: 


هذه هي الوسوم التي نبد بها لإدراج جدول مكون من خلية واحدة أو من مليون 
خلية... الأمر سيان 


</TABLE> ... <TABLE> 
والآن بعد إدراج هذين الوسمين» هناك سؤالين ينبغي الإجابة عليهما. الأول: کم عدد‎ 
الصفوف التي نريدها في الجدول؟ ثلاثة. أربعةء مائة؟ لا بأس» قم باضافة الوسوم‎ 


</TR> ... <TR> 


بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلائة. 
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<TABLE> 


<TR> 
</IR> 


<TR> 
</IR> 


<TR> 
</IR> 


</TABLE> 


والسؤال الثاني هوء كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟ 


</1D> ... <1 D> 


بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <1> ... <R؟۲/>‏ 
طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف› 
وبذلك یجب تکرار کتابتها مرتین لکل صف. 


وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين 


<TABLE> 
<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 
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</TR> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</IR> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</IR> 
</TABLE> 


هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصانا عليها. 


Data Data 
Data Data 
Data Data 


هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم 
باضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن أستمر أود أن 
ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة 
مستویات: 


مستوى الجدول ككل ِ 
مستوى الصفوف ككل أو كل واحد على حده 
مستو ی الخلايا ككل أو كل واحدة على حده 
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ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة 


تستخدم مع كل الوسوم. 


4 


نبدأ بمناقشة الخصائص التي تستخدم مع lالوسصوم </TABLE> ... <TABLE>‏ 
وسأقوم أولاً بسردها لك» ومن ثم إدراج بعض الأمثلة التي توضحها. 


BORDER 


WIDTH 


HEIGHT 


CELLSPACING 


| CELLPADDING 
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تقوم شذه الخاصبة باضافة دود للجدول وتحديد سماگتهاء والقيمة 


ا 


lali,‏ اى ل 
الإأقتثراضية لها هي صفر أي لا حدود 


<TABLE BORDER="5"» 
<TABLE BORDER="0"= 


نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك اسلوبين 

& i oF a“ 8 €, 1 at ٤ 

المطق آي بكتابة ارقم الذي إمس العر صل إبصور د 
1 


مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول 


کنل عر ص نافدذة ااا نقح. (اي ان عرض 1 جدول 3 إِ E‏ 


1“ 1 : 
لتحديد العرض: 


RN ET EE e EFENE 
باحلاء فا عر صل اذد تمتصفح).‎ 


<TABLE WIDTH="600"> 
<TABLE WIDTH="80%"= 


١ i a e 1 2‏ ۾ ت 1 ا اع 3 ml‏ ا 

/ وة EG‏ 1 0 وة 1 ك 1 

تنحذيذ از لفا م الجدو ویگور تحذبد شذ ل الفا ۳ شل حارال به 
أ |= .ا 


۲ i ص‎ e ټ‎ 1 e KE 
قه تحدد اللأرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول‎ 
ص ل اسي‎ 7 Ta 


MR 5 .‏ 
بالنسبة لار تفاع صفحة المتصفح 
= ا 


<TABLE HEIGHT="500"> 
<TABLE HEIGHT="100%">= 


لتحديد المسافة بين كل خلية من خلايا الجدول 
<TABLE CELLSPACING="10"=‏ 


آ" ا اء أ“ N‏ 3 ا“ : mal Tha‏ 
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. او لنقل: 


تحديد حجم الهوامش لخلايا الجدول. 


<TABLE CELLPADDING="1 0"> 
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أتحديد محاذاة الجدول أفقاً على الصفحة يمينا أو يسارا. وشو پأخذ 


left „rig لقم‎ 


<TABLE ALIGN="Left"= 
<TABLE ALIGN="Right"z 


ويستخدم لتحديد لون الخلفية للجدول 
BGCOLOR‏ 
<TABLE BGCOLOR="#0OFFFF">‏ 


هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في 
بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها: 


<TABLE BORDER="5"> 


Data 


Data 


Data | Data 


<TABLE BORDER="5" CELLPADDING="5"> 


Data Data 


Data Data 


Data Data 
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<TABLE BORDER="5" CELLPADDING="5" 
CELLSPACING="10"> 


Data [ata 


Data Data 


Data [Data 


<TABLE BORDER="5" CELLPADDING="5" 
CELLSPACING="10" 
BGCOLOR="#FFFFOO"> 
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<TABLE BORDER="5" CELLPADDING="5" 
CELLSPACING="10" 
BGCOLOR="#FFFFOO" HEIGHT ="300"> 


<TABLE BORDER="5" CELLPADDING="5" 
CELLSPACING="10" 
BGCOLOR="#FFFFOO" HEIGHT ="300" WIDTH="75%"> 
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ونتكلم الآن عن الخصانص المستخدمة مع وسوم الصف < 1۸> ... >/۲R<‏ ولا بأس 
من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص 
التي تضاف لهذا الوسم فهي: 


\LIGN‏ لتحديد محاذاة النص آفقيا داخل الخلايا التي يتكون منها الصف» والقيم 
: : 1 تملة أا 9 9 . , س aT‏ ُ 
المحتملة لها هي ٣عامع)‏ ,)ع1 Rig,‏ والقيمة الإفتراضية هي إعامع) 


1 ا ا MI™S Tl Nt.‏ 
لنحذيذ المحاذاد العمو ذية نلنصل ذاحال حايا 


ءُ وذااك اھا للاعلى او 
¬ ۳ آ f+‏ 1 : ن 1 1 f‏ شض to. fh 1 FF «Ff‏ ~ ه i‏ 
VALICIN‏ للاسقفل او ی المنتصف او عل أمتداد الخط الا ساسی للخليةك. وقيمها عل 


Baseline „Top. Bottom, Middle التو الي ھي:‎ 


ا ب لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون 
چون ن م ا اتحدید لون انخديه الخلايا التي يتگون مها الضت وهنا یتم تجاه دو 
الخلفية المحدد ضمن وسم 81٤<‏ 1۸> ويتم تطبيق اللون المحدد هنا 


ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصانص من خلال الأمثلة التالية: 


<TABLE BORDER="5" HEIGHT ="300"> 
<TR ALIGN="Left"> 

<TD> Data </1 D> 

<TD> Data </1 D> 

</TR> 


<TR ALIGN="Right"> 
<TD> Data </1 D> 
<TD> Data </1 D> 
</TR> 


<TR ALIGN="Center"> 
<TD> Data </1 D> 
<TD> Data </1 D> 
</TR> 

</TABLE> 
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Dala 


Datla 


<TABLE BORDER="5" HEIGHT ="300"> 
<TR VALIGN="Top"> 

<TD> Data </1 D> 

<TD> Data </1 D> 

</ [R> 


<TR VALIGN="Bottom"> 
<TD> Data </1 D> 

<TD> Data </1 D> 
</TR> 


<TR VALIGN="Baseline"> 
<TD> Data </1 D> 

<TD> Data </1 D> 

</TR> 

</TABLE> 
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<TABLE BORDER="5" HEIGHT ="300" 
BGCOLOR="#FFFFFF"> 

<TR BGCOLOR="#808080"> 

<TD> Data </1 D> 

<TD> Data </1 D> 

</ [R> 


<TR BGCOLOR="#COCOCO"> 
<TD> Data </1 D> 

<TD> Data </1 D> 

</IR> 


<TR> 
<TD> Data </1 D> 
<TD> Data </1 D> 


</ [R> 
</TABLE> 


Data 
Data 


والآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوف أتابع الحديث عنها 
في الدرس القادم إن شاء الله. أراك في الدرس التالي لنتابع الحديث عن موضوع 
الجداول. 


91 


HHHHHHHHHHHHHH 
HHHHHHHHHHHHHH 
HHHHHHHHHHHHHH 
HHHHHHHHHHHHHH 
HHHHHHHHHHH 


www. dinaro. com/ vb3 


الدرس الثامن 


الجداو ]2[ 


أهلا وسهلاً بك إلى الدرس الثامن من کتاب تعلم .H[ M1‏ 


نتابع معاً في هذا الدرس الحديث عن الجداول. وأنا أفترض أنك قد آنهيت الدرس السابق 
بنجاح» وأن لديك الآن فكرة جيدة جداً عن الجداول وكيفية إنشائها والتعامل مع 
خصائصها ومع الصفوف وخصائصها. ونكمل الآن من حيث توقفناء أي مع خصائص 
الخلايا. 


هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد الخلايا المطلوب يتحدد من 
خلال كتابة الوسوم <1> ... <15/> مرات بنفس العدد المطلوب. ومن الممكن أن 
تحتوي الخلية على أي عنصر من عناصر لغة M1‏ آ۲٨‏ : نصوص» رسوم» قوائم» 
وصلات تشعبية» بل وحتى جداول. (نعم» تستطیيع إدراج جدول داخل جدول آخر) 


لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق» فسوف نکمل هذا 
الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف وعمودين (أي خليتين في كل 
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أما الخصائنص المستخدمة مع الخلاياء فهذا جدول بها: 


94 


<TABLE> 
<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</ I R> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</TR> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</ I R> 
</TABLE> 


ALIGN 


VALIGN 


WIDTH 


HEIGHT 


BGCOLOR 


COLSPAN 


ROWSPAN 
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تحدد محاذاة النص الموجود في الخلية أفقياء والقيم المستخدمة هي ,أ؟ع.] 
Center, Right‏ 


تحدد المحاذاة العمودية للنص» وهو يأخذ القp Top, Middle, Boom,‏ 
Baseline‏ 


تحدد عرض الخليةء وذلك بكتابةالقيمة المباشرة للعرض المطلوب بالبيكسلء 
بكتابة رقم بمثل اأنس أنسية المئوية. و یکن تخذبذ للخلايا ا أذ 
الصفوف لكي يتم تطبيقه على كل الخا رپا فی کل آ 


نحذدذ الإرتفاع المطلوب أ للخلية في الصف وذلك بالطرق ا لمباشرة ا او النسبية, 

وقيامك بتحديد ارتفاع احدی الصف يؤدي الى تطبیقه على کل 

الخلايا فيه, 

Lk 

يقوم بدمج الخلية الحالية مع العد د المطلوب ب من الخلايا التي تليها فقا 
<TD GOLSPAN="'=‏ 


حيث ۾ هو عدد الخلايا التي سيتم دمجها 


1 اأعأة اللا اأ اأ ا E MILÎ‏ 1 أ 
يفوم بدمج الخليه الحاليه مع اعدد المطلوب من الخلايا الي يها عموديا (أي 
أ فلها), 


<TD ROWSPAN="'= 


وبالطبع م هو عدد الخلايا التي سبتم دمجها 
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وقبل أن نستمر» يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها: 


كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية ٤٣010۴‏ 86. 
كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد 
مع وسم الخلية» فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف فإذا لم يوجد 
يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون 
خلفية الصفحة المحدد في الوسم <5۷ 80>. 


الملاحظة الثانية تتعلق بالخصائص 1٤1‏ ۰۷15 11 E]6]ګ.‏ يختلف أسلوب التعامل 
مع هذه الخصائص من متصفح لآخر بل وتختلف أيضاً طريقة تفسير القيم المحددة 
معها وخصوصا فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة 
والمتصفحات ). 


وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات 
لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد 
العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ککل من خلال الوسم ٤<‏ 1۸8>. ثم 
استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده 
في الصف الأول» والارتفاع المطلوب لكل صف في الجدول. 


وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك. 


إذا أردت أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي 
الصفوف» فلا يكفي أن تقوم بحذف وسوم الخلايا منها. (كما ترى في الشيفرة التالية:) 
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<TABLE BORDER="5"> 
<I R> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</TR> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</TR> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</TR> 
</TABLE> 


لأن هذا ما ستحصل عليه؛ 


Data 
Data | Data 
Data 
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لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت 
محتفظة بنفس خصائصهاء أي أننا لم نستفد من عملية الحذف. 


والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بدمج الخلايا معاً وذلك باستخدام 
اlخصlئفص .ROWSPAN «<COLSPAN‏ 


إذن لنقم باعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص: 


<TABLE BORDER="5"> 

<ÎR> 

<TD COLSPAN="2"> Data </TD> 
</IR> 


<TR> 


<TD> Datla </1 D> 
<TD> Data </1 D> 


</ [R> 


2 IR> 

<TD COLSPAN="2"> Data </TD> 
</TR> 

</TABLE> 
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لأن هذا ما ستحصل عليه: 


Data 
Data Data 
Data 


لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضاً انني لم أقم بإعادة 
وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن قمنا بالدمج. 


وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها. 


ما عدا تعريف الخلية الأساسية بالطبع. 


مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول 
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<TABLE BORDER="5"> 
<TR> 


<TD ROWSPAN="3"> Data </1 D> 
<TD> Data </1 D> 


</IR> 


<TR> 
<TD> Data </1 D> 
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</TR> 


<TR> 

<TD> Data </1 D> 
</TR> 

</TABLE> 


ومرة أخرى بعد تعريف خاصية الدمج العمودي» قمت بحذف تعريف الخلايا المدموجة 
من الصف الثاني والثالث. وهذا هو الجدول الناتج. 


Data 
Data Data 


Data 


هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم <۴1 1> ... >/P ٤<‏ 
وهي اختصار 4ء مء1طه۲ أي ترويسة الجدول. 


والفرق الوحيد بينها وبين <1> ... <1/> هو أن النص الذي تحتويه يظهر بخط 
أسود عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم› كما 
أعتقد)» خاصة وأن الخصائص المستخدمة معها هي نفس خصائص >1٥0<‏ وبنفس 
التفاصيل التي ذكرت. 


الوسوم الأخيرة المستخدمة في الجداول هي </CAPTION> ... <CAPT1O0>‏ 
وهي تختص باإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها 
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مباشرة بعد الوسم >1۸81٤<‏ وبصورة مستقلة وليس ضمن وسوم الصفوف أو 
الخلايا. 


<TABLE BORDER="5"> 
<CAPTION> Table Caption </CAPTION> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</IR> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</IR> 


<TR> 


<TD> Data </1 D> 
<TD> Data </1 D> 


</IR> 
</TABLE> 


Table Caption 
Data Data 
Data Data 
Data Data 
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الرس التاسع 


الإطارات 


أهلاً وسهلاً بك إلى الدرس التاسع من كتاب تعلم .HTML‏ 


في هذا الدرس سوف نقوم بالتعرف على الإطارات وم. ه٣۴‏ وطريقة عرض صفحات 
الويب باستخدامها... 


فهل تعرف ما هي الإطارات؟ حسناء سأوضحها لك... هل سبق لك وأن زرت إحدى 
الصفحات لتشاهد أنها مقسمة إلى عدة أقسام بحيث يظهر في كل منها صفحة مستقلةء 
وتبدو بصورة منفصلة عن الأقسام الأخرى. وربما تكون قد قمت بالنقر على إحدى 
الوصلات التشعبية الموجودة في أحد الأقسام لتظهر الصفحة المتعلقة بها في القسم 
الآخر. 


إذا كنت قد شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك وإلا فشاهد 
مثالا على صفحة ذات إطارات 
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۱ 2 Master File - Microsofi Internet Explorer 


Edition #Affichageg Faworis outils ? 


5 E € کر‎ Rechercher e i 2 2 1 


DINAYO le] Bok Liens 


کما شاهدت› فان الصفحة مكونة من ثلاثة أقسام: علوي وأيسر وأيمن... والحقيقة أن 
كل قسم منها هو عبارة عن ملف ا" كامل ومستقل بحد ذاته. وهي مجرد صفحات 
عادية لا تختلف أبداً عن تلك التي تعلمت إنشاءها في الدروس السابقةء ولا علاقة لكل 
منها بالصفحات الأخرى من حيث التركيب والتعريف. 


أما كيف تم جمعها معا لتظهر بالشكل الذي شاهدته؟ فهنا بيت القصيد. فبالإضافة إلى 
الصفحات والملفات الإعتيادية يوجد دائماً ملف أساسي يتم إنشاؤه خصيصا لتعريف 
صفحة الإطارات وتجميعها وتحديد خصائصها. أي أن المعادلة تتلخص ب: 


مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي الذي يجمعها. 
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أي أنني في المثال السابق إحتجت ت فعلياً إلى أربعة ملفات لتكوين الصفحة. 


وقبل أن نبداً يا عزيزي المتدرب... لنقم بالتحضير للأمثلة التي سترد في هذا الدرس. 
لذلك قم بإنشاء ثلاذة أو أربعة ملفات بسيطة لكي تستخدمها في تطبيق الأمثلة أو 
استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت بإنشاء 
ملفات على النمط التالي (وهي التي استخدمتها في المثال) وأسميتها ,ا)ط.1ءصraاf‏ 
frame2.html, frame3.html‏ 


<HTML> 

<HEAD> 
<TITLE>Frame1</TITLE> 
</HEAD> 

<BODY> 

Frame 1 

</BODY> 

</HTML> 


ونبد الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة 
ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم 


<FRAMESET> ... </FRAMESE T> 


بدلاً من لوصوم </BODY¥> ... <BODY>‏ 


إذن الملف الرئيسى للاطارات لا يتضمن تعريفا باستخدامء 860¥ 


105 


www. dinaro. com/ vb3 


<HTML> 
<HEAD> 
<TITLE>Master File</TITLE> 
</HEAD> 


<FRAMESE T> 
</FRAMESET> 


</HTML> 


نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي °08 
وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وثحدد الأحجام بطريقتين (هل 
عرفتهما؟) نعم... إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما معا. 


والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت نظرك إلى أن قيامك بالنقر 
على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال بصورة عملية لكن إنتبه! 
فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن يؤدي إلى أي 
نتيجة ولا إلى ظهور أي إطارات_حيث ينقصها وسوم أخرى خاصة بمصدر 
الملفات الظاهرة داخل الإطارات» وقد قمت بإكمالها لغرض توضيح النتيجة لك فقط. 
لذلك أرجو أن تكتفي الآن بمعاينة كل شيفرة ونتيجتها إلى أن أقوم بسرد باقي 
الخصائص المهمة لاحفاً. 


<FRAMESET 
i 1 COLS="50%,50%"> 
يحدد إطارين عمودیین حجم کل منهما %50 من حجم الشاشة‎ </FRAMESET> 


<FRAMESET‏ ا 
C018-"20%,50%,30%"<‏ يحدد تلاثة إطارات أحجامها %20 و %50 و %30 على التوالي 
AMEE‏ | من جم الشاشة 
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يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل» والثانى 300 
«JuuSyy | <FRAMESET‏ 


: : . o Î e | | | COLS="200,300,*"> 
أما الثالت * اي انه عير محدد بحجم معین ولکنه سیکون بالحجم‎ </FRAMESET> 


المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة التي 
يستخدمها زائر الموقع) 


F۴1۳‏ > | يحدد أربعة إطارات حجم الأول 2 بیکسل» و الثالث %915 مر" 
Sm ٤ COLS="200,*,15%,20%">‏ و هو ٠‏ 5 % من 
<ا ٤ع‏ | حجم الشاشةء والرابع 20 من حجم الشاشة أما الثاني فسيكون 


حجمه بما تبقى من الشاشة. 


TT : u <FRAMESET 
يحدد ثلاثة إطارات الأرل حجمه 150 بیکسل.... آما المساحة المتبقية‎ COLS="150,*,2*"> 


٤S٤ 1<‏ ۴۴> فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم 
الإطار الثاني (*) 


أما الخاصية الثانية فهي R0 WS‏ وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد 
عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع 
الأعمدةء أي إما باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة 


لتوضيحها (وأذكرك ثانية أن هذه الأمثلة غير مكتملة): 


<FRAMESET 
ا‎ o : E ea ROWS="50%,50%"> 
يحدد إطارين افقیین ارتفاع کل منهما %50 من ارتفاع الشاشة‎ </FRAMESET> 


IT 0 <FRAMESET 
یحدد ثلانة إطارات أفقية ارتفاعاتها %20 و %50 و %30 عل‎ ۴0W S=-"'20%,50%,30%"< 
التوالي من ارتفاع الشاشة‎ </FRAMESET> 


a ا‎ <FRAMESET 
120 يحدد تلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل» والثاني‎ |٩0۷ 5-"50,120,*"< 


٤8۴ <‏ ۳۴> بيكسل» والثالث سيكون بالإرتفاع المتبقي من الشاشة 


۴۸1 >| يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل» والثالث %15“ 
ROWS="50,*,15%,20%">‏ ۱ تفا ۱ » % ۱ ۱ ۴ ۱ تفا ۱ om‏ أ الذا: 
< اع 8۸| من ارتفاع الشاشة» والرابع %20 من ارتفاع الشاشة اني فسيکون 
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<FRAMESET COLS="*,2*"> 
يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول‎ |۴۴5۴ 1< 


لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <1 ٤S؟٤]M‏ ۸ ۴8> فلا زال هناك 
الكثير. ولكن من الضروري أن نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط 
إرتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة أعلاه» وهي M٤<‏ ۸ ۴۸> فما 


حسناء كل ما قمنا به حتى الآن هو تعريف مجموعة من الإطارات وخصائصها (فقط 
تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات ولا محتوياتها ولا مصادرها. تماما 
كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم <۷ 80> دون 
أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً 
نستخدم الوسم الخاص بذلك وهي >me.extصSRC='""'imagna <"IMG‏ 


وفي حالة الإطارات فإننا نستخدم الوسم M]٤<‏ ۸ ۴۸> وهو وسم مفرد أي ليس له 
وسم نهاية تماماً مثل <116>. وفيه نقوم بتحديد مصدر وخصائنص كل ملف نريد 
إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس عدد الإطارات 
المذكورة داخل <1 .>۴R۸R۸ MN ٤S٤‏ وسوف أقوم مباشرة باستخدام الخاصية SR)‏ 
أتحديد مصدر الملف. 


دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة أعلاه. ونبد بالمثال الأول: 


<FRAMESET COLS="50%,50%"> 
<FRAME SRC="frame1 .html"> 
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متال آخر: 


مثال ثالث: 


مثال رابع: 
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<FRAME SRC="frame2.html"> 
</FRAMESET> 


... والآن فقط أصبح لديك صفحة إطارات محترمة. 


<FRAMESET COLS="200,400,*"> 
<FRAME SRC="frame1.htiml"> 
<FRAME SRC="frame2.htim!"> 
<FRAME SRC="frame3.htiml"> 
</FRAMESET> 


<FRAMESET ROWS="50,*,15%,20%"> 
<FRAME SRC="frame1.htim!l"> 
<FRAME SRC="frame2.htim!"> 
<FRAME SRC="frame3.himl"> 
<FRAME SRC="frame4.htiml"> 
</FRAMESET> 


<FRAMESET COLS="*,2*"> 
<FRAME SRC="frame1.himl"> 
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<FRAME SRC="frame2.html"> 
</FRAMESET 


وبالإضافة إلى ما ذكر» نستطيع إدراج صورة مباشرة داخل الإطار وباستخدام 
>۴RAME SRC>‏ تماما كما ندرجها باستخدام SR ٣<‏ 1[16> وإليك هذا المثال 


<FRAMESET COLS="50%,50%"> 
<FRAME SRC="frame1.htiml"> 
<FRAME SRC="alah.jpg"> 
</FRAMESET> 


| A Master File 1 - Microsoft Internet Explorer 


ichier Edition #ûffichage Favori: Outils ? 


5 Eo Liens * 


Frame 


ا 
0 ۸ اوك 


۷تس دک 
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والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ و هذه هي: 


. لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه 
الإطارات. 


. الملف الرئيسي هو ملف 1111 إعتيادي غير أننا نكتب الوسوم 
</FRAMESET>... <FRAMESET>‏ د .<BODY/>... <BODY> ja‏ 
وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها. 


. نستخدم الخصائص K015, ۸0۷8S‏ لتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) 
واحجامها. 


. الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في 
الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة. 


. نستخدم الوسم [٤<‏ ۸ ۴8> داخل الملف الرئيسي لمناداة الملفات الفرعية داخل 
الإطارات» وذلك مع الخاصية .ŠS۸R)٣‏ بالإضافة إلى استخدامه لتحديد باقي الخصائص . 


كما نستطيع تمنيل هيكلية الإطارات من خلال الشكل التالي: 
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ملفا ر ئيیسيى 
Master Fils‏ 
AF FRAMES ET‏ 


< FFRAMESETY 


هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ... 


حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج 
لمعرفة كيفية إدراج كلاهما في الصفحة. كما في الأمثلة التالية: 


صفحة مكونة من صفين» الثاني منهما مقسم بدوره إلى عمودين 


112 


www. dinaro. com/ vb3 


A Master File - Microsoft Inter miet Explorer 


Affichage Favoris Guktils F 


2 @ J Rechercher lT Favors 2 @- اس‎ i ۹ 


dinaro 


Poste de travail‏ ل 


Liens 
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Fichier Edition 


O rrérinente 2 1 أ‎ 


Adresse 


A Master file Microsoft Inter niet ExpIoTer 


Affichage Fauoris Gulls 2£ 
© 0 ك‎ JO Rechercher o Favors @ @- ۹ ۰ ا‎ e ۹ 
« 


8 Paste de travail 


Edition 


Jinaro 


Fichier 


@ Frêcêdenke ” 


Adresse 
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لنبدأ بالمثال الأول: 


بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أول حسب الإرتفاعات المرغوب 
بها: 


<FRAMESET ROWS="100,*"> 
<FRAME SRC="frame1.htim!l"> 
<FRAME SRC="frame2.himl"> 
</FRAMESET> 


لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة M1‏ ]1 وكأنه صفحة 
إطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدل من ذلك نعاود استخدام تعریف 
الصفحات! أي <۴1 MN] ٤S‏ ۸ ۴۸> مرة أخرى. 


<FRAMESET ROWS="100,*"> 
<FRAME SRC="frame1 .html"> 


<FRAMESE T> 
</FRAMESE T> 


</FRAMESET> 


وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى عمودين» إذن بقي علينا إضافة 
تعريف لهذه الأعمدة. وبذلك تكون الشيفرة النهائية كالتالي: 
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<FRAMESET ROWS="100,*"> 
<FRAME SRC="frame1 .html"> 


<FRAMESET COLS="200,*"> 
<FRAME SRC="frame2.him!"> 
<FRAME SRC="frame3.himl"> 
</FRAMESET> 


</FRAMESET> 


لنقم الآن بادراج مثال آخر وتحلیله: 


A UNTIEON - MICTOSOTT IME INET EXPIOTET 


Fichier Edition #ffichage Favors dukils F 
@ e س : و‎ 3 
2 5 5 ۵ ر‎ Rechercher Favaris 4 7 2 e 3 
| Dox Liens * 


Frame Frame 3 
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يوجد لدينا ثلاثة أعمدةء أليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة 
(طبعاً لا يوجد أهمية للأحجام المذكورةء فأنا اخترتها حسب رغبتي وتستطيع أنت 
اختيار الأحجام التي تريدها). 


<FRAMESET COLS="100,*,100"> 
<FRAME SRC="frame1.htim!"> 
<FRAME SRC="frame2.htim!"> 
<FRAME SRC="frame3.htiml"> 
</FRAMESET> 


لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستفلة) 


<FRAMESET ROWS="80,*"> 
<FRAME SRC="frame2.htim!"> 
<FRAME SRC="frame4.htim!"> 
</FRAMESET> 


وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية: 


<FRAMESET COLS="100,*,100"> 
<FRAME SRC="frame1 .html"> 


<FRAMESET ROWS="80,*"> 
<FRAME SRC="frame2.htiml"> 
<FRAME SRC="frame4.him!"> 
</FRAMESET> 
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أهلاً وسهلاً بك إلى الدرس العاشر من کتاب تعلم M1‏ 1. 


كما ترى من العنوان فقد اخترت أن يكون هذا الدرس خارجا قليلاً عن نطاق الدروس 
السابقة من حيث المحتوى. فلن تجد هنا وسوماً محددة تستطيع حصرها تحت موضوع 
معين» بل وسوماً عامة وخصائص إضافية لوسوم ذكرت سابقاً. وإن كان الهدف من 
معظمها ترتيب الصفحة والتحكم بشكل محتوياتها. ولا أخفي عليك أني قصدت تأجيل 
بعضها حتى هذا الدرس مع أنه كان من الممكن إدراجها ضمن دروس سابقةء وخاصة 
الدرس الرابع (الفقرات). لكن حجتي في عدم إدراجها في حينه أن هذه الوسوم لن يتم 
استخدامها ولن تفهم طريقة عملها إلا عند استخدام وسوم أخرى تم شرحها في وقت 
لاحق بعد الفقرات مثل الصور والجداول, أما البعض الآخر ففضلت عدم حصرها ضمن 
أي درس على اعتبار أنها وسوم عامة لا تختص بأي موضوع. على أية حال يكفينا هذه 
المقدمة وأترك لك حرية تصنيفها كما يحلو لك. والآن لندخل مباشرة في الموضوع. 


أترى هذا الخط الذي فصلت به هذه الفقرة عن الفقرة السابقة؟ إنه يسمى بلغة 
۲M‏ ٢ظ‏ بالمسطرة الأفقية Rule‏ ام٤رمام‏ وتستطيع إدراجه لتقسيم صفحتك 
بكتابة الوسم < ]> فقط لا غير. أكتب: 

<HR> 


ليظهر لديك هذا الخط؛ 
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لكن هذا ليس كل شيء. لأنك تستطيع تحديد سمك هذا الخط إذا أضفت له الخاصية 
٤‏ وأتبعتها برقم يمثل هذا السمك مثلاً: 


<HR SIZE="5"> 


<HR SIZE="1"> 


<HR SIZE="10"> 


كذلك يمكنك تحديد عرض الخط باستخدام الخاصية WIDTH‏ والتي من الممكن أن 
تأخد قيمة مطلقة أو نسبية 


<HR WIDTH="80%"> 
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<HR WIDTH="400"> 


<HR SIZE="5" WIDTH="60%"> 


ومن الخصائص الأخرى لهذا الخط خاصية المحاذاه ۸1.16١‏ والتي تأخذ القيم 
left, right ‘center‏ 


<HR WIDTH="80%" ALIGN="center"> 


<HR WIDTH="400" ALIGN="left"> 


<HR SIZE="5" WIDTH="60%" ALIGN="right"> 
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وكما تلاحظ فان هذا الخط يكتسب مظهراً غائراً ثلاثي الأبعاد وإذا أردت خطاً عاديا غير 
غائر فقم بإاضافة الخاصية NOSHA DE‏ 


<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE> 


أما إذا كان لون هذا الخط لا يعجبك» فما من مشكلة إذ أنك تستطيع اختيار اللون الذي 
يعحبك من خلال الخاصية ٥C⁄ LOR‏ )تعمJ‏ فق¡ (MS Explorer ga‏ 


<HR SIZE="5" WIDTH="60%" ALIGN="center" 
COLOR="#FFOO000" NOSHADE> 


الوسم التالي في هذه المجموعة هو وسم الملاحظات <!-- ... --> ونستخدمه عند 
الحاجة لكتابة بعض الملاحظات الخاصة أو العبارات التوضيحية ضمن الملف والتي 


يقصد أن لا تظهر عند استعراض هذا الملف في المتصفح. 


This is line one<BR> 
<!-- This is line two --><BR> 
and, this is line three<BR> 


وهذه هي النتيجة 
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This is line one 


and, this is line three 


من المؤكد أنك تعرف الوسم < 8۸> والذي يقوم بالتحكم في نهايات الأسطر (أي أنه 
ينهي السطر الحالي بحيث يظهر النص الذي يليه في سطر جديد). فهل تعلم أنه يوجد 
خاصية لهذا الوسم وهي 8 ۸٤C1؟‏ 


لكي تتوضح لك طبيعة عمل هذه الخاصيةء قم بمراجعة ما ذكرناه في الدرس الخامس 
عن الصور والرسومات» واستخدام الخاصية ۸1.16۸١‏ التي تحدد موقع هذه الصور 
على الصفحة. حسناًء لقد إتفقنا في حينه على أن القيمة )ع1 توجه الصورة إلى يمين 
الصفحة وأن النص الذي يليها يظهر ملتفاً بعدة أسطر على الجهة اليسرى. وكذلك الأمر 
(بصورة معكوسة) عند استخدام القيمة )۴م[. وحتى لو استخدمنا القيمة إ0٤٤ه0ط‏ أو لم 
نقم باضافة الخاصية ۸116١‏ أصلاًء فسوف نجد أن النص الذي يليها يظهر بمحاذاة 
الحافة السفلى للصورة. 


يتلخص عمل الخاصية C15۸ R‏ في منع النص من الإلتفاف على أي من جانبي 
الصورة. 


وهي تأخذ القيم )عم التي تمنع ظهور النص إلا عند بداية الهامش الأيمن الفارغ بعد 
الصورة (أي بمنتهى البساطة تمنع ظهور النص والتفافه على الجهة اليسرى 
للصورة... أليست هذه العبارة أسهل للفهم؟!!) وبالتالي فإن هذه القيمة تستخدم عندما 
تكون قيمة ۸116١‏ للصورة هي اطعآ٣.‏ 


وبنفس المبدأ لكن بصورة معكوسة نستخدم القيمة ٤۴ع[‏ والتي في نتيجتها تمنع إلتفاف 
النص على الجهه اليمنى من الصورة. ودلك عندما تكکون محاذاة الصورة هي )ء][ 
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منطق معكوس... ليس كذلك؟ على أية حال إذا كنت تكرة هذه التعقيدات وتحب الطرق 
المختصرة مثلي» فاستخدم القيمة [[ج التي تمنع الإلتفاف من جميع الجوانب. 


ما رأيك أن نقتبس بعض الأمثلة من الدرس الخامس لنشاهد كيف تعمل مع إضافة هذه 
الخاصية؟ وسوف أدرج هذه الأمثلة كما هي نصاً وحرفاً أما الإضافات فهي المميزة 
باللون الأحمر 


RIGHT 


أ i ei ak A aA‏ 1 ت ا * اأ ا اأ r # r a‏ 
سا شذد القبهكة شدؤدي إلى محذاة الص ور د إل اقصسي اليمين. مق النقاف النص اندي بلبھا على 
1 4 1 


و اا م ا ا ا Meld‏ 
لجههة اليسز_ ك ولغدة اللدضز_ كسب ارنفاع الصو زق 


<IMG SRC="imagêe.jpg" ALIGN="RIGHT"= 
<BR CLEAR="right"z 


فإذا أضفنا الوسم <8> مع الخاصية "۲[ع!إ؟"=۸ C18۸‏ لوجدنا أنها منعت النص من 


إل ا 


والآن لنجرب استخدام القيمة left‏ & هذا المثال نفسه 


RIGHT 


TT #۴‏ “ا # Ii‏ آ 2 f ef ef‏ 
Cg?‏ ها شذه ألقيمةه قدو دی الے 1 محاذاة الصورة الى سے اليمين. مع التفاف النص 
2 پا ج ۶ سا ت 
لذ , تاها عل , الحعة الس ع لعدة اسا ننن أ تفاع إا ۹ 
الذي يليها على الجهة اليسر ى ولعدذه اسطر حسب لفاح الصو 


<IMG SRC="image.jpg" ALIGN="RIGHT"= 
<BR CLEAR="lefl"= 


نلاحظ أن لا فائدة من استخدام الو سم <8> مع الخاصيۂ ")۴ ع| CE ۸ R="‏ فکل ما فعلتھ 
أا 


فة سط فا اض 
شر ا ار عئي النصل 
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حسناً لنستخدم القيمة left‏ کي مکانها الصحيح› أي مع المحاذاة )۴[ 


. 3 ور ۹ ® Fi mA‏ و ا آ2 4 OT‏ اأ i "iı‏ 1 
a 8 1 .‏ 9۹ ا U ET + El‏ أ ص + هھ 
هده انفيمة دؤدي إلى محاداة الصورة إلى اقصى اليسار. مع النفاف النص الدي پليه على 


الجهة اليمنى ولعدة اسطر حسب ار تفاع الصور د 


<IMG SRC="image.jpg" ALIGN="LEFT"> 
<BR CLEAR="lefl"> 


الاآن تعمل هذه القن لقبمة كما یجب ( ل شىء أفضا سن و صح الوسم المنا نسل في المكان 


المناسب!) 


وأترك لك المجال لكي تجرب القيمة 11 بنفسك 


من القواعد الإفتراضية للمتصفحات أن الأسطر في كل فقرة تلتف وتنقسم بصورة 
تلقائية حسب إستبانة الشاشة وعرض نافذة المتصفح. (هذه نعرفها من الدرس الأول). 
لكن لنقل أننا نريد من أحد الأسطر أن لا ينقسم مهما كان مقدار الإستبانة وعرض 
النافدة. 


حسناًء» کل ما علينا فعله هو وضع هذا السطر ضمن الوسوم 
<NOBR> ... </NOBR>‏ 


وهي إختصار ل )و8۸ N0‏ أي (لا إنقسام). 


124 


www. dinaro. com/ vb3 


الدرس العاطبي عشر 
النماذج ]1[ 


أهلاً وسهلاً بك إلى الدرس الحادي عشر من كتاب تعلم M1‏ [. 


سيكون هذا الدرس الأول من درسين سنتحدث فيهما عن النماذج وكيفية ية تضمينها في 
صفحات الويب. 


مع أن النماذج تعتبر من المواضيع المتقدمة (وغير السهلة) نوعاً ما في لغة اHT1M‏ 
إلا أن معظم مواقع الويب تكاد لا تخلو من وجودهاء وذلك لعدة أسباب لعل من أهمها 
إيجاد إمكانية للتفاعل بين الموقع وصاحبه من جهة والزوار من جهة أخرى.. .أحيانا قد 
تحتاج كمصمم لموقع ويب أن تعرف آراء زوار موقعك في مسائل معينة وقد تكتفي 
برسائل البريد الإلكتروني التي يرسلوها لك لكن عندما تريد معرفة أشياء محددة بذاتها 
فإن النماذج هي الخيار الأفضل لك. بالإضافة إلى إمكانية تنظيم البيانات المدخلة من 
خلالها وسهولة وسرعة استخدامها من قبل زوار الموقع. ومن أبرز الأمثلة على 
النماذج في مواقع الويب هي دفاتر الزوار وصفحات البحث عن الكلمات أو العبارات 
داخل المواقع. 


لا تكمن صعوبة التعامل مع النماذج في كونها معقدة بحد ذاتهاء كلا ... فهي إحدى 
العناصر التي تدعمها لغة M1‏ 1] وهي مجرد وسوم عادية مثلها مثل الوسوم التي 
تعاملنا معها في جميع الدروس السابقة. وبامكانك إنشاء النماذج في موقعك بنفس 
السهولة التي تدرج فيها جدولً أو إطاراً (هذا بالطبع إذا كنت تعتقد أن الجداول 
والإطارات سهلة) لكن التداخل بينها (وأعني النماذج) وبين لغات البرمجة المتقدمة في 
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الويب مثل C61‏ ,ام ااء؟ه۷هل هي ما يجعلها تختلف عن سابقيها من الوسوم أو 
العناصر الأخرى. خاصة إذا احتجت إلى بعض المقاطع البرمجية من هذه اللغات ضمن 
نماذجك. أما إذا اكتفيت بالإمكانات المتواضعة التي توفرها ۲۷11[ بالنسبة للنماذج. 
فما من مشكلة... لأنه سيكون بإمكانك التعامل معها بكل بساطة. وفي هذا الدرس لن 
نتطرق بالطبع إلى أي من اللغات سوى .]١١M1‏ 


قبل أن نبدأء ما رأيك بزيارة صفحة (دفتر الزوار) في هذا الموقع للإطلاع على مثال 
للنماذج» (وربما تود أيضاً التوقيع فيه). 

كم شكلاً من أشكال إدخال البيانات يوجد في هذا الدفتر؟ الحقيقة أنه يوجد ستة أشكال 
هي کالتالي: 


Text 
| Option 1 چ‎ 


gE KG Û 


وهي الأشكال الموجودة في الدفتر فقط. وأود أن ألفت نظرك إلى وجود أشكال أخرى 
سوف يتم التعامل معها من خلال هذا الدرس. 


والآن إلى العمل يا عزيزي المتدرب 
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مع أن الأشكال السابقة تختلف عن بعضها البعض من حيث المبداً والمظهر (وطريقة 
التعريف أيضا) إلا أنها يجب أن تدرج جميعاً ضمن وسمين أساسيين للنماذج هما: 


</FORM> ... <FORM> 


وكما جرت العادة نحتاج لتحديد بعض الخصائص التي تتعلق بطبيعة هذا النموذج. ولدينا 
هنا ثلاث خصائضص: 


ACTION 


تحدد العنوان الذي سيتم إرسال بيانات النموذج إليه لتتم معالجتها بالصورة المطلوبة. 
وعادة يكون هذا عنواناً لبريد إلكتروني ازه_۴E‏ سوف يتم إرسال بيانات النموذج إليه. 
أو قد يكون عنواناً لبرنامج C61‏ موجود على الكمبيوتر الخادم إم۷آم؟ الذي تتواجد 
عليه صفحة الويب» حيث يستقبل هذه البيانات ويعالجها حسب التعليمات الموجودة فيه 
كأن يضيفها ملا إلى إحدى الصفحات (كما يحدث عادة في دفاتر الزوار) أو يتحقق من 
صحة بعض الحقول المدخلة ومطابقتها لمعايير معينةء أو أن يقوم بالبحث عن كلمة أو 
عبارة ضمن صفحات الموقع كما في نماذج البحث الموجودة في مواقع الويب. 


<FORM ACTION="mailto:someone@domain.com"> ... 


</FORM> 
<FORM ACTION="name_and_ address _ of CGI_script"> ... 


</FORM> 
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METHOD 


تحدد الطريقة التي سيتم بها التعامل مع العنوان المحدد في الخاصية السابقة 
C۲0١‏ ۸. وهناك قيمتين لهذه الخاصية هما: 6>1 التي تستخدم في حالة كون 
عملية المعالجة داخلية أي تتم داخل الخادم Server‏ نفسہ. ففي مثالنا السابق عندما 
نستخدم نموذج البحث عن كلمة في الموقع» فإن عملية المعالجة (أي البحث) تجري 
مباشرة في الموقع. والقيمة الثانية هي ٤ء٠٣‏ وتستخدم عندما تكون عملية المعالجة 
خارجية كأن يتم إرسال البيانات إلى عنوان بريد إلكتروني. 


<FORM ACTION="mailto:someone@domain.com" 
METHOD="post"> ... </FORM> 

<FORM ACTION="name_and_address_of CGI_script" 
METHOD="get"> ... </FORM> 


نبدأ الآن في عملية تعريف أشكال البيانات في النموذج. ونستخدم الوسم <1 ا1N۲>‏ 
لتعريفها والحقيقة أن هذه الأشكال هي مجرد خصائص أو بالأحرى قيم لخصائص تابعة 
لهذا الوسم. كيف؟ ... لنأخذ مثالا على ذلك لأوضح لك هذا المفهوم 


ملاحظة: إذا كنت تستخدم S1844‏ 3.> فسيبدو الحقل والنص المجاور له بصورة 
معکوسه» وهي مشکله ناتجه عن برنامج هم هءء)م" الدي يعمل من خلاله 


:Please enter your address 
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حسناء لقد استخدمت الوسم <1 >][N۲1'‏ لتعريف هذا الشكل (هذه إتفقنا عليها مسبقا) 
ومن ثم قمت بإضافة الخاصية ۲۷۲۴٤٤‏ لهذا الوسم لتحديد نوع الشكل الذي أريده 


وأعطيتها القيمة ۲٤×1‏ أي 
<FORM ...>‏ 
<INPUT TYPE="text">‏ 
</FORM>‏ 
لينتج لدينا هذا الشكل: 
س 
فقرة معترضة: 
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إليك جميع الأشكال (القيم) المستخدمة مع الخاصية 
۶۴ وسوف آتركها الان بدون تعليق لحين مناقشها 
لاحقا بشكل مفصل. مع ملاحظة أن هناك شكلين 
اخرين ندرجهما بالوسوم 

<TEXTAREA> <<SELECT> 


<INPUT TYPE="text"> 
<INPUT TYPE="password"> 


<INPUT TYPE="hidden"> 
8 <INPUT TYPE="radio'"> 
م‎ <INPUT TYPE="checkbox'"> 


<INPUT TYPE="submit"> 


Soumettre la requête 


Rétablir <INPUT TYPE="reset"> 


<INPUT TYPE="button"> 
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أرجو أن أكون قد وضحت لك الآن وظيفة الخاصية 1۷۲٤‏ وجميع القيم المستخدمة 
معها 


ونعود الآن إلى مثالنا.. الخاصية الثانية المستخدمة مع <1 ١ا1NP<‏ هي NAME‏ 
وتستخدم لتسمية حقل البيانات حيث قمت بإعطاء الإسم كوءإ 4ه لهذا الحقل في 
المثال. (لك كل الحرية في إعطاء الإسم الذي تريده للحقل). والحقيقة أن هذا الإسم 
يعرف الحقل في داخل النموذج نفسه» بحيث يمكن استخدامه فيما بعد للحاجات البرمجية 
وضرورات المعالجة إن وجدت من قبل البرامج التي قد تضيفها كمصمم للموقع. وحتى 
عندما تريد أن يرسل النموذج إليك بالبريد فإن حقوله تعرّف بالاسم الذي أدرجته لها من 
خلال هذه الخاصية. (لاحظ ما قله سابقاً عن تعريف أسماء الحقول عندما تحدثنا عن 
الترميز والطرق التي تصل بها محتويات النموذج). وكما ترى لا يوجد (حتى الآن) ما 
يدل على أن هذا الحقل يختص بإدخال العنوان. 


<FORM ...> 
<INPUT TYPE="text" NAME="address"> 
</FORM> 

ل 


أما العبارة ssمء enter your addr‏ مasعاP‏ : فهي مجرد عبارة توضيحية أضفتها 
ليعرف الزائر ما الذي يجب عليه كتابته وتستطيع صياغة هذه العبارة كما تريد. ففي كل 
الأحوال ليس لها علاقة بجوهر النموذج نفسه بعكس الخاصية .".۸M٤‏ 


<FORM ...> 
Please enter your address : <INPUT TYPE="text" 
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NAME="address'"> 
</FORM> 


: Please enter your address 


قد نحتاج أحياناً إلى تحديد حجم الحقل ولذلك نستخدم الخاصية S17٤‏ مع الرقم الذي 
نريده كحجم للحقل» لنجرب الرقم 40 


<FORM ...> 

Please enter your address : <INPUT TYPE="text" 
NAME="address" SIZE="40"> 

</FORM> 


: Please enter your address 


الخاصیة ٤0۴ا‏ ۷۸ تستخدم في الحالات التي نتوقع فيها كتابة قيمة دارجة أو متكررة 
من قبل معظم الزوار وللتسهيل عليهم يتم تعيينها كقيمة إفتراضية وبالطبع مع توفر 
إمكانية حذفها وكتابة ما يريدنه بدلا منها. 


<FORM ...> 

Please enter your address : <INPUT TYPE="text" 
NAME="address" VALUE="maroc"> 

</FORM> 


| ° : Please enter your address 
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لا يوجد للخاصية 517/۴ أي صفة تحكمية بالنسبة لحجم المدخلات التي يمكن للزائر أن 
يكتبها داخل الحقل. وبعبارة أخرى: صحيح آننا حددنا حجم الحقل لكن ذلك يسري فقط 
على مظهره على الشاشة. ولا يوجد ما يمنع الزائر من الكتابة بحيث يتجاوز النص حجم 
الحقل المحدد. وهنا يأتي دور الخاصية ٤ N61۴٤‏ ]×1۸ لتتحكم بالحد الأقصی 
للنص المدخل. 


<FORM ...> 

Please enter your address : <INPUT TYPE="text" 
NAME="address" VALUE="maroc" 

SIZE="40" MAXLENGTH="30"> 

</FORM> 


Please enter your address‏ : ا 


حاول الكتابة في هذا الحقل لأكثر من 60 حرفاً وأنظر ماذا سيحدث؟ 


إنتهينا الآن من خصائص الوسم 1 N۲1‏ فما رأيك بإجمالھا مرة أخری؟ حسناًء هذه 
هي: 


1۷۶٤۶‏ : لتحديد نوع (شكل) حقل البيانات. 
څM NA‏ : لتعیین اسم أحقل البيانات. 

1Eا‏ ا ۷A‏ : لتعيين قيمة إفتراضية (مبدئية) لحقل البيانات. 

1٤‏ لتحديد حجم حقل البيانات. 

MA XL ENGTH‏ : لتعيين الحد الأقصى لعدد الحروف المدخلة في الحقل. 
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النوع الثاني من الحقول المستخدمة في النماذج هو حقل Q١إهسءءوم‏ وهو يشبه الحقل 
x)tهt‏ من حيث الخصائص تماما غير أن مدخلاته تظهر علی شکل ****** مهما 
كانت» وهو الفرق الوحيد بينهما. وربما تكون قد استنتجت الآن أن هذا النوع من 
الحقول يستخدم عندما يوجد حاجة لإدخال كلمة سر من قبل الزائر في النموڏج 


<FORM ...> 

Please enter your name : 

<INPUT TYPE="text" NAME="the name" VALUE=" 
SIZE="40" MAXLENGTH="30"> 

Please enter your passwod : 

<INPUT TYPE="password" NAME="the password" VALUE="" 
SIZE="40" MAXLENGTH="30"> 

</FORM> 


: Please enter your name 
: Please enter your password 


لاحظ أنني لم أرغب في كتابة قيم إفتراضية L158‏ ۷ للحقول› ولذلك تركتها فارغة 
وأستطيع أيضاً أن ألغيها نهائياً من الشيفرة. وأنا في هذا المثال أردت أن أوضح لك عدم 
أهمية كتابة قيمة إفتراضية للحقول في بعض الحالات. 


نأتي الآن إلى النوع الثالث من آنواع الحقول وهو 11ط أي الحقل المخفي. وكما 
نستنتج من اسمه فهو لن يظهر ضمن النموذج. وهذا مثال: 


<FORM ...> 
Please enter your name : 
<INPUT TYPE="text" NAME="the name" VALUE=" 
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SIZE="40" MAXLENGTH="30"> 
<INPUT TYPE="hidden" NAME="my forms" VALUE="form1"> 


Please enter your passwod : 

<INPUT TYPE="password" NAME="the password" VALUE='"" 
SIZE="40" MAXLENGTH="30"> 

</FORM> 


: Please enter your name 


: Please enter your passwod 


لاحظ هنا أن وجود هذا الحقل مثل عدمه بالنسبة لمظهر النموذج» وأن الزائر لن يتعامل 
معه بل وربما لن يعرف أن هناك حقلاً مخفياً. والسؤال هنا: ما الفائدة من وجود شيء 
مخفى لا إمكانية لاستخدامه؟ ولكي أجيب على هذا السؤال دعني أطرح لك مثالا أو حالة 
قد تواجهك کمصمم صفحات ویب... 


لنفرض أن لديك ثلاث صفحات تتضمن كل منها نموذجاً ما وأن هذه النماذج متشابهة. 
وتحتوي على نفس الحقول. وعندما تصلك البيانات كيف ستستطيع تمييز أي من هذه 
النماذج استخدم لإرسال البيانات؟ باإمكانك إضافة هذا الحقل (الوهمي) وإسناد أي اسم 
وأي قيمة له في كل نموذج. 


في النموذج الأول ... 


<INPUT TYPE="hidden" NAME="my forms" VALUE="form1"> 


135 


www. dinaro. com/ vb3 


. ف النموذج الثاني‎ 
<INPUT TYPE="hidden" NAME="my forms" VALUE=" form2"> 


<INPUT TYPE="hidden" NAME="my forms" VALUE=" form3"> 


وبذلك عندما تصلك البيانات المرسلة من قبل أي زائر استخدم أي من النماذج الثلاثة 
سيصلك أيضا حقل إضافي قمت أنت نفسك بتعبئته سلفاً عندما صممت النموذج وذلك 
بأحد الأشكال التالية: 


my forms=form1‏ أو 
gl forms=form2 my‏ 
my forms=form3‏ 


إذن نستطيع القول أن الحقل المخفي هو لاستخدام المصمم وليس الزائر» وأن قيمته 
تدخل مباشرة عند التصميم. ويستخدم بهدف تعريف قيم ما سيتم إرسالها جنباً إلى جنب 
ضمن بيانات النموذج التي قام الزائر بتعبئتها. 


ملاحظة مهمة بالنسبة للنماذج بشكل عام. من أجل إظهار النموذج بصورة مرتبة 
ومنسقة والتحكم بموقع الحقول فيه فمن الأفضل دائماً وضعه داخل جدول مع جعل 
الجدول بلا حدود. 


<FORM ...> 
<TABLE BORDER="0"> 
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<IR> 

<TD>Please enter your name : </1 D> 

<1 D> 

<INPUT TYPE="text" NAME="the name" VALUE=" 
SIZE="40" MAXLENGTH="30"> 

</1 D> 

</TR> 


<TR> 

<TID>Please enter your password :</1 D> 

<I D> 

<INPUT TYPE="password" NAME="the password" VALUE='"" 
SIZE="40" MAXLENGTH="30"> 

</1D> 

</TR> 

</TABLE> 

</FORM> 


وكما ترى تحتاج إلى القليل من العمل الإضافي لكنك بالمقابل ستحصل على النتيجة 
التالية 

Please enter your name : 

Please enter your password : 


هكذا أفضل... أليس كذلك يا أيها المصمم ؟ 
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)الدرس الڅافبي عشر 
النمادذج |2[ 


أهلاً وسهلاً بك إلى الدرس الثاني عشر من كتاب تعلم .HTML‏ 


هذا الدرس هو الثاني من درسين حول النماذج. لقد قمنا في الدرس السابق بمناقشة 
الوسوم الأساسية للنماذج وتعلمنا كيفية إدراج النماذج في صفحات الويب. كما قمنا 
بمناقشة بعض أشكال إدخال البيانات في النموذج وهي Text, Password, Hidden‏ 
هل تذكر كيف نقوم بتعريفها؟ راجع الدرس السابق إن أردت المزيد من التوضيح» وإلا 
هيا بنا نكمل ولندخل في الموضوع مباشرة. 


سوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة 
ثلاثة أنواع: ×0 )ءheط€ R410,‏ وقائمة الإختيار 


نبدأ مع الشكل المسمى 510[ ۸۸. ومن مسوغات استخدام هذا الشكل أن السؤال 
المطروح ينبغى أن يكون له إجابة واحدة فقط أو بعبارة أخرى على الزائر أن يختار 
إجابة واحدة فقط. 


وکمتال» لنفرض أنني أريد أن أسأل الزائر عن المتصفح الذي يستخدمه (کما هو موجود 
في دفتر الزوار على شكل قائمة إختيار) لكن بدلا من أن يكون على شكل قائمة إختيار 
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أريده أن يكون على شكل ۸۸٥10‏ وذلك بالشكل التالي:(أود أن أذكرك أن عناصر 
النموذج تظهر بشكل معكوس إذا كنت تستخدم 3.0 (Sindbad‏ 


Û Sindbad 3.0 
Û Sindbad 4.0 
Û Ms Explorer 3.0 
Û Ms Explorer 4.0 


فکيف ننشيء متل هذه القائمة؟ ... حسناًء لنبدأً من الصفر ونعرّف نموذجاً 


<FORM> 


</FORM> 


ثم لنقم بتعريف هذا الشكل» هل تذكر الوسم الخاص بذلك؟ إنه >1 ا۴ >1N‏ 


<FORM> 
<INPUT TYPE="radio"> 
</FORM> 
لكن بما أن هناك أربعة مدخلات» إذن نحتاج إلى أربعة وسوم‎ 
<FORM> 


<INPUT TYPE="radio"> <BR> 
<INPUT TYPE="radio"> <BR> 
<INPUT TYPE="radio"> <BR> 
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<INPUT TYPE="radio"> <BR> 
</FORM> 


نحتاج الآن إلى تسمية هذه المدخلات» أي أننا سنستخدم الخاصية "M٤‏ معها. أما 
الاسم المعطى بحد ذاته فمن الأفضل أن يكون مرتبطاً نوعاً ما بموضوع السؤال»ء ليس 
لأن هذا ضروري للنموذج بل هو ضروري لك كشخص سيقوم باستقبال البيانات 
المرسلة من خلال النموذج» وبالتالي من الأفضل أن يوجد عنوان معبر للبيانات بغرض 
التمييز. وبما أننا هنا نتحدث عن المتصفحات فليكن هذا الاسم ھو W se٣‏ ٥اط‏ 


<FORM> 
<INPUT TYPE="radio" NAME="browser"> <BR> 
<INPUT TYPE="radio" NAME="browser"> <BR> 
<INPUT TYPE="radio" NAME="browser"> <BR> 
<INPUT TYPE="radio" NAME="browser"> <BR> 
</FORM> 


وكما تلاحظ من النتيجة أن هذه التسمية هي ضمنية فقط ولا تؤثر على شكل النموذج 
(راجع الدرس السابق) لكن أي إختيار سيقوم به الزائر من هذه الأربعة خيارات سوف 
یصلك تحت الاسم Wwser٥rاط.‏ 
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الخطوة التالية هي إعطاء قيمة لكل مدخلة في هذه القائمة وذلك حسب ما نراه مناسباًء 
إذن حان الوقت لاستخدام الخاصية ٤اا‏ ۷۸: 


<FORM> 

<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> 
<BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> 
<BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> 
<BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> 
<BR> 

</FORM> 


وهنا أيضا نلاحظ أن لا تغير في شكل النموذج ظاهرياً مع إضافة هذه الخاصية. لكن مع 
ذلك فقد قمنا حتى الآن بتسمية الحقول وإعطاء كل حقل قيمة محددة. وفعلياً لقد إنتهينا 
من هذا النموذج. لكن بالطبع نحن لا نتوقع أن يكون الزائر عالما بالغيب لكي يخمن أي 
من هذه الحقول تختص بكل قيمة. لذلك بقی علينا تعريف كل حقل باسم صريح يوضح 
محتواه. 


<FORM> 

<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> 
Sindbad 3.0 <BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> 
Sindbad 4.0<BR> 
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<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> 
MS Explorer 3.0<BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> 
MS Explorer 4.0<BR> 

</FORM> 


Û Sindbad 3.0 
Û Sindbad 4.0 
Û MS Explorer 3.0 
Û MS Explorer 4.0 


وهناك خاصية تتعلق بهذا النوع من الحقول» وهي أنك إذا أردت أن يظهر أحدها وقد تم 
اختياره بشكل تلقائي فعليك بإضافة الخاصية 5 KH ٤)) ٤‏ إليه» مع ترك كل الحرية 
للزائر في اختيار ما يريده فيما بعد. 


<FORM> 

<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> 
Sindbad 3.0 <BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Sind4" 
CHECKED> 

Sindbad 4.0<BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> 
MS Explorer 3.0<BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> 
MS Explorer 4.0<BR> 

</FORM> 
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Û Sindbad 3.0 
E Sindbad 4.0 
Û MS Explorer 3.0 
Û MS Explorer 4.0 


وأخيرآ... أود أن أوضح لك الصورة التي يصلك بها النموذج عند اختيار أحد حقوله 
(ولنفترض أنه الخيار الثالث). وهي بالشكل التالي: 


browser=Msie3 


نأتي الآن إلى الشكل الثاني من أشكال الإختيار من متعدد والذي يدعى 

.C©H E٤8 0×‏ ظاهرياً لا يختلف هذا الشكل عن الشكل الذي سبقهء لكن عملياً هناك 
اختلافات جذرية من حيث المفهوم والتعريف. وأنا أفضَل أن نبقى على استخدامنا للمثال 
السابق حتى يسهل علينا تمييز الفروق. 


` Sindbad 3.0 
| Sindbad 4.0 
. MS Explorer 3.0 
MS Explorer 4.0 


ا v1‏ 1ا 


قبل أن نستمر قم بالنقر على أكثر من حقل في القائمة السابقة وأنظر ماذا سيحدث؟ إن 
باستطاعتك اختيار أكثر من حقل في نفس الوقت! وهذا هو الفرق الأول بين 
CHECKBOX‏ و D10‏ ۸ ۸ ففي R۸10‏ یمکن اختیار حقل واحد فقط لیس أکثر. 


144 


www. dinaro. com/ vb3 


<FORM> 

<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"> 
Sindbad 3.0 <BR> 

<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> 
Sindbad 4.0 <BR> 

<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"> 
MS Explorer 3.0 <BR> 

<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> 
MS Explorer 4.0 <BR> 

</FORM> 


ماذا تلاحظ؟ أو لقد أسندنا القيمة >مطءءطء للخاصية ۲٤‏ 1۷. ثم أعطینا لكل حقل 
في القائمة إسماً مميزاً في الخاصية N۸ ]٤‏ يختلف عن باقي الحقول. أما الخاصية 
٤1ا۷‏ فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة 
الأسماء التعريفية لكل حقل. 


في ۸۸10 نستطيع اختيار حقل واحد فقط أما في 
CH] E٤٣) 80×‏ فنختار أكثر من حقل» لذلك یستخدم عادة في 
الحالات التي يحتمل أن نحصل فيها على عدة أجوبة لنفس السؤال. 


في 8۸510 تكون أسماء الحقول موحدة والقيم مختلفة› أما في CHEC68 0X‏ 
فتکون الأسماء مختلفة والقيم موحدة 


كيف ستصل البيانات؟ حسناً لنفرض أنه تم اختيار الحقلين الثاني والرابع فسوف تصلك 
النتيجة بالشكل التالي: 


Sind4=Yes 
Msie4=Yes 
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كما نستطيع أيضاً تعليم بعض الحقول بصورة تلقائية كما فعلنا مع 510 8۸ باستخدام 
نفس lئخاصي4 CHECKED‏ 


<FORM> 

<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes" 
CHECKED> 

Sindbad 3.0 <BR> 

<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> 
Sindbad 4.0 <BR> 

<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes" 
CHECKED> 

MS Explorer 3.0 <BR> 

<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> 
MS Explorer 4.0 <BR> 

</FORM> 


“ Sindbad 3.0 

` Sindbad 4.0 

™“ MS Explorer 3.0 

"` MS Explorer 4.0 

النوع الثالث من أشكال الإختيار من متعدد هو قوائم الاختيارء وهذا النوع سوف يقودنا 
إلى وسوم جديدة من وسوم التعريف والتي ستستخدم بدلا من <1 اNP![>‏ وهي 


<SELECT> 
<OPTION> 
<OPTION> 
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<OPTION> 


</SELECT> 


بحيث أن >SE[8)1/< ... >58] ٤٣1<‏ تحددان بداية ونهاية القائمةء والوسم 
<۲10 0۲> الذي یوضع دائما بینهما یستخدم لتحدید کل عنصر من عناصر 
القائمة. لنعد إلى متالنا السابق لذنرى کیف یمکن وضع الخيارات في قائمة 


<FORM> 

<SELECT> 
<OPTION> Sindbad 3.0 
<OPTION> Sindbad 4.0 
<OPTION> MS Explorer 3.0 
<OPTION> MS Explorer 4.0 

</SELECT> 

</FORM> 


وبذلك تكون النتيجة هي: 


Î Sindbad 3.0 | 


وكالمعاد لايخو الامن هن وجود خضائص تحددطريقة عمل هذه الوسوم. وهناك 
خصائص مشتركة عرفناها في الأشكال السابقة سيتم استخدامها هنا أيضاً كما يوجد 
خصائص جديدة تتعلق فقط بهذا الشكل من حقول البيانات. فبالنسبة !ٍِِ <1 EC‏ SEL؟S>‏ 
يوجد الخاصية "۸۴٤‏ وهي كما تعلم تحدد اسم القائمة. كما توجد الخاصیيةۂ S17۴٤‏ 
التي تحدد حجم (أو بالأحری) ارتفاع القائمة» وبالتالي عدد البيانات الظاهرة فيها. وهي 
تأخذ أي قيمة عددية صحيحة. 
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<FORM> 
<SELECT NAME="browser" SIZE="2"> 
<OPTION> Sindbad 3.0 
<OPTION> Sindbad 4.0 
<OPTION> MS Explorer 3.0 
<OPTION> MS Explorer 4.0 
</SELECT> 
</FORM> 


وبذلك تكون النتيجة هي: 


Î Sindbad 3.0 
Sindbad 4.0 


وطالما بالإمكان عرض القائمة بأي ارتفاع نريدء وقد يصل إلى حد عرض جميع بيانات 
القائمة معاًء فان هناك إمكانية أيضاً لجعل اختيار البيانات من هذه القائمة متعدداً وليس 
فقط قيمة واحدة» كيف؟؟ بإضافة الخاصية 11۴1٤‏ اا لنقم الآن بعرض جمیع 
القيم (لدينا أربعة قيم» إذن القيمة المكتوبة مع 817/٤‏ يجب أن تكون 4)» ومن ثم لنتح 
المجال أمام الزائر لاختيار أكثر من قيمة واحدة في القائمة. 


<FORM> 
<SELECT NAME="browser" SIZE="4" MULTIPLE> 
<OPTION> Sindbad 3.0 
<OPTION> Sindbad 4.0 
<OPTION> MS Explorer 3.0 
<OPTION> MS Explorer 4.0 
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</SELECT> 
</FORM> 


وبذلك تكون النتيجة هي: 


Sindbad 3.0 
Sindbad 4.0 
MS Explorer 3.0 
MS Explorer 4.0 


لاحظ آنه لأداء عدة اختيارات يجب أن تقوم بالضغط على المفتاح [إ)ء بصورة 
متواصلة أثناء عملية الإختيار. 


أما الخصائص المستخدمة مع الوسم ۲110١N<‏ 0> فهي ۷۸10٤‏ والتي 
استخدمناها من قبل وسنستخدمها الآن لإعطاء قيمة لكل حقل بيانات في القائمة. وكذلك 
الخاصیة SE ٤٣)1٤‏ والتي نکتبھا مع أي < P۲10‏ 0> نرید أن یظھر وقد تم 
اختياره بصورة تلقائية. 


<FORM> 

<SELECT NAME="browser" SIZE="4" MULTIPLE> 
<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0 
<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad 
4.0 
<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0 
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<OPTION VALUE="MS Explorer 4.0"> MS Explorer 4.0 


</SELECT> 
</FORM> 
وبذلك تكون النتيجة هي:‎ 
Î Sindbad 3.0 
Sindbad 4.0 
MS Explorer 3.0 
MS Explorer 4.0 


الشكل التالي من أشکال حقول البیانات یدعی ۲٤× 1۸ R٤۸‏ 


mE 


<TEXTAREA> ... </IEXTAREA> 


هل تستطيع تخمين الخصائص المستخدمة معه؟ بالطبع لا بد من وجود الخاصية 
N M٤‏ لإعطاءه اسم التعريف. لكن لا وجود للخاصية ۷۸110٤‏ » وبالمقابل فان أي 
نص يكتب بين الوسمين سيتم عرضه داخل الحقل بصورة تلقائيه 
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<TEXTAREA NAME="comments"> 
Hello, please write your comments here :-) 
</TEXTAREA> 


Hello, please w rite your comme 


E 
الا‎ 5 


كما توجد خصائص لتحديد مساحة هذا الحقل عرضاً وارتفاعاًء وهي K01S‏ التي 
تحدد العرض و 8۳0۷S‏ التي تحدد الإرتفاع 


<TEXTAREA NAME="comments" COLS="30" ROWS="6"> 
</TEXTAREA> 


E 
E 


أما الخاصية الأخيرة هنا فهي ۷۸۸۲ التي تحدد طريقة إلتفاف النص المكتوب داخل 
الحقل (لا تعمل هذه الخاصية مع 3.0 ءإه‌آم×5 )۷18S‏ وهناك ثلاثة قيم تأخذها وهي 
على النحو التالي: 

”ار : التي تعني أن النص سيلتف على عدة أسطر عند كتابته ولكنه سيصلك عند 
إرساله على شكل سطر واحد متتابع (حاول الكتابة داخل الحقول وأنظر كيفية تأثير هذه 
الخاصية على كل منها) 
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<TEXTAREA NAME="comments" COLS="30" ROWS="6" 
WRAP-="virtual"> 
</TEXTAREA> 


E 


physica‏ : تعني أن النص سيلتف على عدة أسطر وسيصلك أيضاً على هذا النحو 
عند ارساله 


<TEXTAREA NAME="comments" COLS="30" ROWS="6" 
WRAP="physical"> 
</TEXTAREA> 


fÊه‏ : تعني أن النص لن يلتف بصورة تلقائية على عدة أسطر لكنه على أية حال 
سيصلك بنفس الشكل الذي تم إدخاله به 
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<TEXTAREA NAME="comments" COLS="30" ROWS="6" 
WRAP="off"> 
</TEXTAREA> 


E 


حسناًء بافتراض أننا إنتهينا من كتابة الشيفرة الخاصة بالنموذج وننتظر من أي زائر 
للموقع أن يملأه» والسؤال هو كيف يمكن له أن يرسله فعليا؟ نعود الآن إلى الوسم 
<1 1ا1N۲>‏ وهذه المرة مع النوع ٤ص‏ طںء والتي ستقوم تلقائياً بإنشاء زر سيقوم 
عند النقر عليه بإرسال البيانات التي تم ملؤها في النموذج. 


<INPUT TYPE="submit"> 


Soumettre la requête 


لاحظ أن ٤ص Sub‏ أو ) Submit Query‏ في eمapعءtمN)‏ ظاهرة على الزر وهي 
العبارة الإفتراضيةء فإذا أردت تغييرها فعليك باستخدام الخاصیة ٤0ا1‏ ۷۸ لهذا 
الغرض 


INPUT TYPE="submit" VALUE="Press here to send the 
fOrM"> 


153 


www. dinaro. com/ vb3 


Press here to send the form 


في حالة كان زوار موقعك من النوعية المترددة من الناس والذين قد يغيرون آرائهم في 
آخر لحظة» يمكنك أن تتيح لهم إمكانية مسح ما كتبوه في النموذج وإلغاء الأمرء وذلك 
باستخدام )عع کنوع ٥۴٤‏ ۲۷ للوسم <1 '1ا1×N۴P>‏ بنفس طریقة التعریف 
والخصائص المستخدمة مع اأص طنuء.‏ 


<INPUT TYPE="reset" VALUE="Forget about it"> 


Forget about it 


الشكل الأخير من أشكال البيانات في النماذج والمدرج مع الوسم <1 1۶> هو 
tn‏ والذي يقوم بإنشاء زر ضمن النموذج» وهو مرتبط بالنماذج التي تحتوي على 
نصوص برمجية (أو برامج مكتملة) من لغات متقدمة مثل أمذإء؟ه۷ هل كونه يستخدم 
لتشغيل هذه البرامج وإطلاقها. وطبعاً هناك طرق معينة لربطها مع البرامج وليس هنا 
المجال لطرحها. لكن مبدئياً أقول إن طريقة الإدراج والتعريف هي ذاتها المستخدمة مع 
.reset, submit‏ 


<INPUT TYPE="button" VALUE="This is a sample 
button"> 


وأخيراً ... وصانا الآن إلى نهاية حديثنا عن النماذج. فما رأيك؟ هل هو من المواضيع 
السهلة أم الصعبة؟ لا شيء سهل في بدايته. لذلك من الأفضل لك أن تحاول دائماً التدرب 
أولاً بأول على الوسوم المشروحة» بل والعودة إلى الدروس السابقة إذا اقتضى الأمر 
وخاصة إذا تداخلت بعضها مع الدروس الأحدث. 
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الدرس )لالب عشر 
الو سوم lلmlasة‏ _ MS Internet‏ 


Explorer 


أهلاً وسهلا بك إلى الدرس الثالث عشر من كتاب تعلم M1‏ ]. 


والذي سنناقش فيه واحداً من المواضيع المهمة. . والشائكة., . والمزعجة نوعاً ما في 
هذه اللغةء وفي مجال تصميم صفحات الويب عموماً. وهو موضوع الوسوم الخاصة... 
فما هي هذه الوسوم؟ 


ملاحظة مهمة: تحتوي هذه الصفحة على وسوم خاصة بالمتصفح MS Internet‏ 
Explorer‏ فاد کان متصفحك خلاف ذلك فلن تس تستطيع مشاهدة الصفحة بالصورة 
المناسبة 


>86GS0 ا١‎ N < أصوات موسيقية‎ . 


<MARQUEE> Gli . 
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<BGSOUND> 


تستطيع تعيين أي ملف صوتي يحمل الإمتداد لن أو جس أو سه بحيث يعمل تلقائيً 
عندما يتم تحميل الصفحة في المتصفح» وذلك باستخدام الوسم <60 >86S0‏ (أي 
)S0und Back Ground‏ فعلی سبیل المثال› قمت بإدراج المقطع المسمی dنہ.!‏ 
بالطريقة التالية 


<BGSOUND SRC="IkI.mid"> 


إذن هناك الخاصية 9۸8١‏ والتي تستخدم كما ترى لتحديد اسم الملف المدرج. كما يوجد 
أيضاً الخاصية 100۶ التي تحدد عدد مرات تكرار عزف المقطوعة أي أنها تأخذ 
أرقاماً صحيحة عادة. أما لو قمت باعطاءها القيمة 1- أو القيمة infinite‏ فھذا سوف 
يؤدي إلى تكرار عزف المقطوعة إلى ما لا نهاية (لا تخف» فهذا لا يعني أن العزف 
سيستمر بعد أن تقوم بإطفاء جهازك) فقط سوف تسمعها طالما أنك موجود في الصفحة 
وسيتوقف بمجرد انتقالك لصفحة أخرى أو خروجك من البرنامج. 


<BGSOUND SRC="lIkI.mid" LOOP="infinite"> 
<BGSOUND SRC="IkI.mid" LOOP="3"> 


أما في حالة أردت إدراج وصلات تشعبية لملفات صوتية في موقعك بحيث يمكن للزائر 
أن يحملها أو أن ينقر عليها إذا أراد سماعهاء فذلك يتم بالطريقة الإعتيادية لإدراج 
الوصلات والتي تعلمناها کی الدرس السادس آي کما يلي : 


<A HREF="IkI.mid"> ... </A> 
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</IMARQUEE> ... < MARQUEE> 


نص يتحرك من اليسار إلى اليمين 


ما رأيك بهذا النضص المتسكع أمامك على الشاشة؟ جمیل ..أليس كذلك؟ هذه اللافتة (إن 
جاز التعبير) هي إحدى المؤثرات الخاصة التي يمكن إحداثها في .MS Explorer‏ 
بواسطة هذه الوسوم. وبكل بساطة هذه هي الشيفرة الخاصة بذلك 


<MARQUEE> 
HTML 
<IMARQUEE> 


بالطبع لا يمكن أن تمر الأمور هنا ببساطة فلا بد من وجود خصائص لهذه الوسوم» 
والحقيقة أن هناك إحدى عشرة خاصية نستخدمها (عدد ليس بالقليل بالنسبة لوسوم 
خاصة). لكنها على أية حال ليست صعبة التطبيق بل إننا تعاملنا بشكل أو بآخر معها 
مسبقاً وخاصة مع الوسم >1M16<‏ وهذه هي الخصائص أسردها لك مع الأمثلة: 


BGR‏ : لتحديد لون الخلفية 


<MARQUEE BGCOLOR="#FFOO000"> 
HTML 
</MARQUEE> 
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:H]E]GH1‏ لتحديد إرتفاع اللافتة» وهي إما أن تأخذ قيمة ثابتة أو قيمة نسبية حسب 


إرتفاع نافذة المتصفح. 
<MARQUEE BGCOLOR="#FFO000" HEIGHT ="80">‏ 
HTML‏ 
</IMARQUEE>‏ 


۷1۸ : لتحديد عرض اللافتة» وهنا أيضاً إما أن تأخذ قيمة ثابتة أو نسبية 


<MARQUEE BGCOLOR="#FFO0000" HEIGHT ="80" 
WIDTH="40%"> 

HTML 

<IMARQUEE> 


N‏ 16[ : لتحديد المحاذاة العمودية للنص الذي قد يتواجد على جانبي اللافتةء وهي 
تأخذ القيم eاmidd tp,‏ و 0tt0mط‏ وهي الإفتراضية أي التي تطبق تلقائياً عند عدم 
إدراج هذه الخاصية 


Welcome to 

<MARQUEE BGCOLOR="#FFO000" HEIGHT ="80" 
WIDTH="40%"> 

HTML 

</MARQUEE> 

Have a good time. 
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Welcome to 

<MARQUEE BGCOLOR="#FFOO000" HEIGHT ="80" 
WIDTH="40%" ALIGN="middle"> 

HTML 

</IMARQUEE> 

Have a good time. Welcome to 

<MARQUEE BGCOLOR="#FFOO000" HEIGHT ="80" 
WIDTH="40%" ALIGN="middle"> 

H.P in arabic 

</MARQUEE> 

Have a good time. 


Welcome to 

<MARQUEE BGCOLOR="#FFO0000" HEIGHT ="80" 
WIDTH="40%" ALIGN="top"> 

HTML 

</IMARQUEE> 

Have a good time. 


:]SPA ۳٤‏ لتحديد المسافة الفارغة التي تفصل بين اللافتة وبين النص الموجود 


على جانبیها 
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HTML 

</IMARQUEE> 

Have a good time 
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:۷SPA)#٤‏ تعمل مثل الخاصية السابقة لكنها تحدد المسافة الفارغة عمودياً من 
الأعلى والأسفل 


حتى الآن كانت الخصائص التي ناقشناها مجرد خصائص مظهرية تتعلق بشكل ومظهر 
اللافتة دون تغيير طريقة عملها. والآن نأتي إلى الخصائص الفنية: 


BEHA 0R‏ تحدد سلوك النص الموجود في اللافتة وطريقة عمله وهناك ثلاثة قيم 
(أو بالأحرى) ثلاثة أساليب لحركة النص وهي التالية: 


* ااهاءء يتحرك بنفس الإتجاه من جانب إلى اخر وبصورة مستمرة وهي 
القيمة الإفتراضيةء لذلك لا يهم إن كتبت أم لا. 


٠‏ لزا يتحرك النص مرة واحدة من جانب إلى الجانب الآخر ويتوقف 
عنده., 


<MARQUEE BGCOLOR="#FFOO000" WIDTH="80%" 
BEHAVIOR="slide"> 

HTML 

<IMARQUEE> 


من المحتمل أن يكون النص فى المثال متوقفاً بعد أن يكون قد أكمل تحركه» لذلك 
بالنقر زر طوءإfمR‏ الموجود فى متصفحك لإعادة تحميل الصفحة وتحريك النص 


مرة أخرى 
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* ع ernat‏ )اه يتأرجح النص جيئة وذهاباً من جانب إلى آخر. 


<MARQUEE BGCOLOR="#FFOOOO" WIDTH="80%" 
BEHAVIOR="alternate"> 

HTML 

</MARQUEE> 


 ]RECT10N‏ تحدد إتجاه سير النص وذلك من خلال القيم م[ التي تحركه إلى 
اليسار (وهي الإفتراضية) و )عم التي تحركه إلى اليمين. 


<MARQUEE BGCOLOR="#FFO000" WIDTH="80%" 
DIRECTION="right"> 

HTML 

<IMARQUEE> 


00۶[ تحدد عدد المرات التى سيتحرك فيها النص داخل اللافتة. فاذا أردت أن 
تستمر الحركة إلى ما لا نهاية فضع القيمة 1- أو رگم وبخلاف ذلك ضع عدد 
المرات التي تريدها. والشيفرة التالية تحدد عدد مرات الحركة بثلاث. (إذا وجدت النص 
ساكناً أو لم تجد نصا على الإطلاق فهذا يعني أنه قد استنفذ حركاته الثلاث لذلك تحتاج 
للنقر على طومآfمR‏ لإعادة تشغيله) 
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<MARQUEE BGCOLOR="#FFO000" WIDTH="80%" 
DIRECTION="right" LOOP="3"> 

HTML 

<IMARQUEE> 


بقي لدينا الآن خاصيتين تقومان بتحديد سرعة تحرك النص في اللافتة 


والآن إليك الخصائص: 


:S ROLLA MOUNT‏ هذه الخاصية تحدد المسافة بين كل لقطة وأخرى للنص 
قليلاً لكن لا بأس سأوضحها بالأمثلة), 


<MARQUEE SCROLLAMOUNT="1"> HTML 
</MARQUEE> 


<MARQUEE SCROLLAMOUNT="50"> HTML 
<IMARQUEE> 


<MARQUEE SCROLLAMOUNT="100"> HTML 
</MARQUEE> 
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<MARQUEE SCROLLAMOUNT="200"> HTML 
</IMARQUEE> 


في الحالة الأولى فان المسافة التي تقطعها كلمة 1111 في كل حركة لها هي 1 
بيكسل. أما في المثال الثاني فالمسافة هي 50 بيكسل أي أن الكلمة تقفز 50 بيكسل في 
كل خطوة (أو لقطة) بما يساوي 50 ضعفاً عن المثال السابق وهذا ما يعطي الإنطباع 
بالسرعة» وهكذا الأمر للمثالين اللاحقين وهما 100 و 200 بيكسل على التوالي. 


:S€R 0-LE |-AY‏ لكي نحدد الزمن الذي يستغرقه النص في القفز بين كل 
خطوة وأخرى نستخدم هذه الخاصية» والقيمة المعطاه مع هذه الخاصية تمثل الزمن 
بالميلي ثانية (0.001 من الثانية) 


سوف أستخدم نفس الأمثلة السابقة مع هذه الخاصية لنقارن بين النتائج في الحالتين: 


<MARQUEE SCROLLAMOUNT="1" 
SCROLLDELAY="500"> HTML </MARQUEE> 


<MARQUEE SCROLLAMOUN 1 ="50" 
SCROLLDELAY="500"> HTML </MARQUEE> 


<MARQUEE SCROLLAMOUN 1 ="100" 
SCROLLDELAY="500"> HTML </MARQUEE> 
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<MARQUEE SCROLLAMOUN 1="200" 
SCROLLDELAY="500"> HTML </MARQUEE> 


لقد أسندت القيمة 500 لهذه الخاصية في جميع الأمثلة وهي تعني أن هناك فترة نصف 
ثانية (بالتمام والكمال) تفصل بين كل خطوة وأخرى للكلمة. وأعتقد أن ما تراه الآن 
يوضح لك مبدأ عمل الخاصية السابقة أيضا. وبالمناسبةء قد تضطر للانتظار دهراً 
كاملا لكي ترى النص في المثال الأول. 


ما رأيك الآن لو نلغي الخاصیة CRO] MO N1‏ لنری کیف تعمل 
S€CROLLDELAY‏ لوحدھا 


<MARQUEE SCROLLDELAY="500"> HTML </MARQUEE> 


نكون الآن قد وصلنا إلى نهاية هذا الدرس وهذا الكتاب» مع أصدق تمنياتي بأن يكون 
موقعك دائما منیر ١١١۱۱۱۱۱‏ بعون الله 
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النماية 


المراجع التي إستفديت منها سنا الكتابه : 


: خوقع‎ 
www.khayma.com\HPINARABIC 


تھ پحهد الله 
نسال الله ټباوك وټعالي أن يون هذا العمل 
طاهرا إنه وليي لك والقادر عليه 


وصلي اللعه وسلو وبارك علي فبينا هحمد وغلي 
آله و صحية أجمعين. 
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واخر ڪځواڼا أن المد لله ری العالمیں. 
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